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语句中。