javascript - 使用 JQuery 间隔后更改 CSS 类

Question

我有一个包含内容的 div，我想更改类名以使 div 可见。我有一个时间间隔，当它过期时它应该更改为 display: yes 并且它应该出现，但它不起作用。如果我设置为在 4 秒后消失，脚本会正确运行，但是当我希望它出现时它会失败。

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

.show {
  display: yes;
  visibility: visible;
}

.hide {
  display: none;
  visibility: hidden;
}

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

https://jsfiddle.net/istvan1026/g1cvttnd/1/

Answer 1

您在这里得到了很多重写代码以使其工作的答案，但没有太多解释为什么您的代码不起作用。

首先是简单的部分:display: yes 不是东西； display 的允许值包括block、inline 和none。 (以及其他几十个值，但不是"is"。)

更正“显示”类以使用 display: block 而不是 display: yes 本身并不能解决问题，但是:你的 div 有类“隐藏”，并且您正在打开和关闭类“显示”(不删除“隐藏”类。)因此两个切换状态是“隐藏”或“显示隐藏”(两个类一起)。

并且因为“隐藏”类在 CSS 中位于“显示”类之后，它具有优先权，所以当两个类都在同一元素上时，“隐藏”类获胜。

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

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

由于 div 的初始状态是“隐藏”(本身)，同时切换显示和隐藏类将意味着下一个状态将是“显示”(本身)，然后回到“隐藏”(本身) .)

其他几个小问题:

• 如@rbester 的回答中所述，在 div 上使用显式标识符可能更安全，而不是使用稍后将打开和关闭的相同类名捕获它。它在您的代码中工作正常，因为您在变量 $post 中捕获 div，但以后很容易不小心尝试将其引用为 $('.hide ') 在 setInterval 循环中，它并不总是匹配您想要的元素。
• 不必同时设置display:none 和visibility:hidden 来隐藏元素。任何一个都将隐藏元素(尽管方式不完全相同。设置 visibility:hidden 将隐藏元素，但仍会在布局中为其留出空间。display:none 将其从布局中完全删除。在大多数情况下，display:none 就是您想要的。)