使用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

如果你不使用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>

Answer 2

您還需要切換hide類，如：

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

Answer 3

首先，在顯示屬性不能有「是」。它可以是'block'，'inline'，'none'等。

其次，使用標識符$（「。hide」）是一個問題，因爲那是您正在切換的類。

你不需要一個.show類。只需使用：

HTML：

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

JS：

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

Answer 4

試試這個

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

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

的CSS

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

Answer 5

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 6

您可以使用setInterval輕鬆完成此操作。

如果你想切換，也就是說，出現和交替地消失在div然後使用

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

如果你只是想使它看起來那麼使用

$("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; 
} 

下面是一個例子

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 7

你有很多答案在這裏，重寫代碼，使其工作，但沒有太多的解釋爲什麼你的代碼沒有工作。

首先容易的部分：display: yes不是件事;允許的值爲display包括block,inline和none。 （以及幾十個其他值，但不是「是」）。

更正要使用的「顯示」類display: block而不是display: yes並不能解決問題，但：您的div具有類「隱藏」，並且您正在切換類「show」的開啓和關閉（不刪除「隱藏」類）。因此，兩個切換狀態是「隱藏」或「顯示隱藏」（兩個類一起）。

因爲「hide」類在CSS中的「show」類之後，所以它優先，所以當兩個類在同一個元素上時，「hide」類將獲勝。

有幾種不同的方法可以解決這個問題：根本不能使用「show」類，只需打開和關閉「hide」類。或者你可以同時切換兩個類：

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

由於div的初始狀態是「隱藏」（本身），切換兩種顯示和隱藏類一起將意味着下一狀態將是「秀」（由本身），然後再返回到「隱藏」（本身）

其他幾個小問題：

• 正如@ rbester的答覆中提到，它可能是更安全的DIV使用一個明確的標識，而不是使用相同的類名捕獲它，稍後您將切換。它在你的代碼中可以正常工作，因爲你在變量$post中捕獲div，但是很容易在以後偶然嘗試在setInterval循環中將它稱爲$('.hide')，該循環並不總是與你想要的元素匹配。
• 沒有必要設置display:none和visibility:hidden來隱藏元素。任何一個都可以隱藏元素（儘管不完全一樣，設置visibility:hidden會隱藏該元素，但在佈局中仍留有空間。display:none完全將其從佈局中刪除。在大多數情況下display:none是你想要的。）

Answer 8

你去探索還有一個選擇是使用jQuery的內置功能選項，如.hide（），.show（）和.toggle（）

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