如何在几秒后隐藏 innerHTML？

Question

我想在几秒钟后隐藏 innerHTML“Unfollowed”，然后再次显示“Follow”。

var clicked = false;
document.getElementById("followbutton").addEventListener("click", function(){
  if (clicked==false){
    document.getElementById("followbutton").innerHTML = "Followed"
    clicked=true;
  }else if (clicked==true){
    document.getElementById("followbutton").innerHTML = "UnFollowed".hide().delay(3000).fadeIn('slow');
    document.getElementById("followbutton").innerHTML = "Follow";
    clicked=false;
  }
})

此代码无法正常工作我只是缺乏完成它的知识。 如果您能提供帮助，那将非常感谢。

Answer 1

您不能将 hide()、delay() 和 fadeIn() 等 jQuery 函数链接到像 innerHTML 这样的普通 JavaScript 语句，您需要先将元素包装在 jQuery 对象中。

所以问题是隐藏、延迟和淡入都被忽略了。

这应该有效：

var clicked = false;
document.getElementById("followbutton").addEventListener("click", function(){
  if (clicked == false){
    document.getElementById("followbutton").innerHTML = "Followed";
    clicked = true;
  } else {
    $("#followbutton").html("UnFollowed").delay(3000).fadeOut('slow', function() {
      $(this).html("Follow").fadeIn('slow');
      clicked = false;
    });
  }
});

在这个版本中，按钮元素被包裹在一个 jQuery 对象中。

Answer 2

首先，语法说明：我强烈建议使用 kebab 大小写（破折号而不是空格）以提高可读性和约定。这是一篇文章，可以了解更多关于不同案例的信息：https://www.freecodecamp.org/news/snake-case-vs-camel-case-vs-pascal-case-vs-kebab-case-whats-the-差异/#kebab-case

其次，不要用var声明变量，对变化的变量使用let，对保持不变的变量使用const。有人告诉我这个，然后查了一下原因，因为当你刚接触编程时，需要接受很多东西，而 var 已经过时并会产生问题。

当你操作 DOM 时，你必须选择元素并将其保存在一个变量中，就像这样：

let followBtn = document.getElementById('followbutton');

然后你可以用它做各种各样的事情，比如附加事件监听器

followBtn.addEventListener('click', function(evt) {
    console.log(evt);
}

我会从那里开始，让按钮立即工作，然后在其他功能正常工作后添加该功能。

希望有帮助！