Question

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

＆＃13;

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

＆＃13;

.show {
  display: yes;
  visibility: visible;
}

.hide {
  display: none;
  visibility: hidden;
}

＆＃13;

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

＆＃13;

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

Answer 1

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

首先是简单的部分：display: yes不是一件事; display的允许值包括block，inline和none。（以及其他几十个值，但不是＆＃34;是＆＃34;。）

更正＆＃34;显示＆＃34;使用display: block代替display: yes的课程本身并不能解决问题，但是：你的div有类＆＃34;隐藏＆＃34;，而你正在切换班级＆＃34;显示＆＃34;打开和关闭（不删除＆＃34;隐藏＆＃34;类。）因此，两个切换状态是＆＃34;隐藏＆＃34;或＆＃34;显示隐藏＆＃34; （两个班级一起）。

因为＆＃34;隐藏＆＃34;课程是在＆＃34; show＆＃34; CSS中的类，它优先，所以当两个类在同一个元素上时，＆＃34;隐藏＆＃34;上课胜利。

有几种不同的方法可以解决这个问题：你无法使用＆＃34; show＆＃34;完全上课，然后切换＆＃34;隐藏＆＃34;上课和下课。或者你可以同时切换两个类：

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

因为div的初始状态是＆＃34;隐藏＆＃34; （单独），将节目和隐藏类一起切换将意味着下一个状态将是＆＃34;显示＆＃34; （单独），然后回到＆＃34;隐藏＆＃34; （本身。）

其他几点：

正如在@ rbester的回答中所提到的，在div上使用显式标识符可能更安全，而不是使用您稍后切换打开和关闭的相同类名来捕获它。它在您的代码中运行正常，因为您在变量$post中捕获了div，但稍后很容易在$('.hide')内将其称为setInterval {1}}循环，它不会总是匹配您想要的元素。
没有必要同时设置display:none和visibility:hidden来隐藏元素。任何一个都可以隐藏元素（虽然不完全相同。设置visibility:hidden将隐藏元素，但仍然在布局中留下空间。display:none将其从布局中完全删除。大多数情况display:none都是你想要的。）

Answer 2

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

＆＃13;

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

＆＃13;

.show {
    display: inline;
}

.hide {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 3

您还需要切换hide类，如：

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

Answer 4

首先，display属性不能为'yes'。它可以是“阻止”，“内联”，“无”等。

其次，使用标识符$（“。hide”）是一个问题，因为那是你要切换的类。

您不需要.show类。只需使用：

HTML：

<div class="myDiv hide">
    text
</div>

JS：

setInterval(function() {
    $(".myDiv").toggleClass("hide");
}, 4000);

Answer 5

试试这个

var $post = $(".hide");

setInterval(function(){
     $post.toggleClass('hide');
}, 4000);

的CSS

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

Answer 6

var hello = $(".hide");
setInterval(function(){ 
    hello.removeClass("hide").addClass("show");
}, 4000);

.show{
    
    visibility: visible;
}


.hide{
 
    visibility: hidden;
}

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

希望，这可以解决您的问题。

Answer 7

You can do this easily using setInterval.

If you want to toggle, that is, appear and disappear the div alternately then use

$("div").toggleClass("hide");

If you only want to make it appear then use

$("div").removeClass("hide");

js:

setInterval(function(){
    //to toggle
    $("div").toggleClass("hide");

    //to only make it appear
    $("div").removeClass("hide");
}, 4000);

html:

<div class="hide">text</div>

css:

.hide{
    visibility: hidden;
}

Here's an example

setInterval(function(){
    $("div").toggleClass("hide");
}, 4000);

.hide{
    visibility: hidden;
}

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

Answer 8

您要探索的另一个选项是使用jQuery内置函数的选项，例如.hide（）,. show（）和.toggle（）

http://api.jquery.com/category/effects/basics/

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

8 个答案: