jQuery .show（）一個具有特定值屬性的div

Question

我隱藏div直到經過了一段特定的時間，我試圖告訴jQuery用相應的時間顯示特定的div。

HTML

<div class="content"> 
    <div class="item" value="00:15"> 
     <p>Some text</p> 
    </div> 
    <div class="item" value="00:30"> 
     <p>More text</p> 
    </div> 
    <div class="item" value="01:00"> 
     <p>Even more text</p> 
    </div> 
</div> 

JS

$('.content').children().hide(); 

// some timer function returning timeElapsed 

var myTime = '01:00'; 
if (timeElapsed == myTime) { 
    $('.item').attr('value', myTime).show(); 
} 

發生了什麼事是if語句被觸發時所有.item的div都出現，而不是由var myTime指定的。什麼需要改變？

Answer 1

您可以使用attribute equals selector

if (timeElapsed == myTime) { 
    $('.item[value='+myTime+']').show(); 
} 

Answer 2

試試這個：

if (timeElapsed === myTime) { 
    $('.item[value="' + myTime + '"]').show(); 
} 

Answer 3

什麼這行做$('.item').attr('value', myTime).show();被搶佔了所有item元素上的所有元素.item設置attr與myTime和觸發表演。

如果你需要一個更好的選擇，即attribute equals

$('.item[value="' + myTime + '"]')

另一種方式來做到這一點是不會導致再次查詢DOM會在一個簡單的each()循環來設置定時器。

你應該使用data-*屬性可能會更好地爲你和jQuery一起工作。

同樣以總秒數進行處理也會使得處理值變得更容易一些。

<div class="content"> 
    <div class="item" data-seconds="15"> 
     <p>Some text</p> 
    </div> 
    <div class="item" data-seconds="30"> 
     <p>More text</p> 
    </div> 
    <div class="item" data-seconds="60"> 
     <p>Even more text</p> 
    </div> 
</div> 

$("div.item").hide().each(function(index, item){ 
    var $item = $(this); 
    setTimeout(function(){ 
     $item.show(); 
    }, $item.data("seconds") * 100); 
}); 

Example on jsfiddle

Answer 4

if (timeElapsed == myTime) { 
    $('.item[value=' + myTime + ']').show(); 
} 

或

if (timeElapsed == myTime) { 
    $('.item').filter('[value=' + myTime + ']').show(); 
} 

從外觀上來看，你不需要if語句中。