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指定的div。需要改变什么？

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个元素，在所有attr元素上设置myTime .item并触发show。

如果您需要更好的选择器，即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语句。

jQuery .show（）一个具有特定值属性的div

4 个答案: