问使用JQuery在间隔后更改CSS类

EN

你已经得到了很多重写代码以使其工作的答案，但没有太多关于为什么代码不工作的解释。

首先是简单的部分：display: yes不是一个东西；display允许的值包括block、inline和none。(还有几十个其他值，但不是“yes”。)

但是，将"show“类改正为使用display: block而不是display: yes本身并不能解决问题:您的div中有"hide”类，并且您需要打开和关闭"show“类(而不删除"hide”类)。因此，两种切换状态是“隐藏”或“显示隐藏”(两个类一起)。

因为"hide“类在CSS中位于"show”类之后，所以它优先于"hide“类，所以当两个类都在同一个元素上时，”hide“类获胜。

有几种不同的方法可以解决这个问题:根本不能使用"show“类，只需打开和关闭"hide”类即可。或者您可以同时切换这两个类：

$post.toggleClass("show hide");
// Or use $post.toggleClass("show").toggleClass("hide");  same thing

由于div的初始状态是" hide“(自身)，同时切换show和hide类将意味着下一个状态将是"show”(自身)，然后返回"hide“(自身)。

其他几个次要问题：

• 正如@rbester的回答中所提到的，在div上使用显式标识符可能更安全，而不是使用您稍后将切换开关的相同类名来捕获它。它在您的代码中运行良好，因为您在变量$post中捕获了div，但很容易在以后意外地尝试在setInterval循环中将其引用为$('.hide')，这并不总是与您想要的元素匹配。
• 没有必要同时设置display:none和visibility:hidden来隐藏该元素。这两种方法中的任何一种都会隐藏元素(尽管方式不完全相同。设置visibility:hidden将隐藏元素，但仍会在布局中为其留出空间。display:none会将其从布局中完全删除。在大多数情况下，display:none就是您想要的。)

如果你不使用toggleClass，应该没问题：

​

var post = $("#text");
setInterval(function(){
    post.removeClass("hide");
    post.addClass("show");
}, 2000);

.show {
    display: inline;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text" class="hide">
 text
</div>

​

您还需要切换hide类，如下所示：

var $post = $(".hide");
setInterval(function(){
    $post.toggleClass("show");
    $post.toggleClass("hide");
}, 1000);