0

<ul>有很多<li>项目，其中一些是highlighted，另一些是simple：

<ul class="news">
      <li class="highlighted">Item 1</li>
      <li class="highlighted">Item 2</li>
      <li class="simple">Item 3</li>
      <li class="highlighted">Item 4</li>
      <li class="simple">Item 5</li>
      <li class="simple">Item 6</li>
      <li class="highlighted">Item 7</li>
      <li class="simple">Item 8</li>
      //...etc..
</ul>

我需要在此页面加载时将所有highlighted项目设置为simple.

如果可以显示更改的项目，专门用于打击。喜欢fadeOut()或替换类 2 次，最后将所有项目设置为simple类。

我试过这样，但没有工作：

$(document).ready(function () {
    $('.news').onload(function () {
        $(this).find(".highlighted").each(function () {
            setTimeout(function () {
                $(this).removeClass('highlighted');
            }, 4500);
            $(this).addClass("simple");
        });
    });
});
4

3 回答 3

1

缓存this，摆脱onload：

$(document).ready(function () {
    $('.news').find(".highlighted").each(function () {
        var $that = $(this);
        setTimeout(function () {
            $that.removeClass('highlighted');
        }, 4500);
        $that.addClass("simple");
    });
});

演示

于 2013-02-09T22:07:46.673 回答
1

" 或替换类 2 次，最后将所有项目设置为简单类。"

像这样的东西：

$(document).ready(function() {
    var $lisToChange = $("ul.news li.highlighted");
    for (var i = 0; i < 3; i++)
       setTimeout(function() {
           $lisToChange.toggleClass('highlighted simple');
       }, i * 500 + 500);
});

演示：http: //jsfiddle.net/Ex6tw/1

也就是说，获取对需要更改的元素的引用（$lisToChange在我的代码中），然后仅在这些元素上切换类。要通过多次执行来引起对更改的注意，只需setTimeout()在循环中使用即可。

于 2013-02-09T22:13:12.510 回答
1

以下将等待 4.5 秒，然后highlighted从元素内的所有元素中删除该类，news并将其替换为simple.

<script type="text/javascript">
    $(document).ready(function () {
        setTimeout(function() {
            $('.news > .highlighted').toggleClass('highlighted simple');
        }, 4500);
       });       
    });
</script>

如果您希望它们一次完成一个，那么相隔 4.5 秒。

<script type="text/javascript">
    $(document).ready(function () {
        $('.news > .highlighted').each(function(i) {
            var $self = $(this);
            setTimeout(function() {
                 $self.toggleClass('highlighted simple');
            }, (i + 1) * 4500);
        });      
    });
</script>

如果您想要淡出效果，请以不同的外观淡入，看起来像

<script type="text/javascript">
    $(document).ready(function () {
        $('.news > .highlighted').each(function(i) {
            var $self = $(this);
            setTimeout(function() {
                 $self.fadeOut(function() {
                      $self.toggleClass('highlighted simple')
                           .fadeIn();
                 });
            }, (i + 1) * 4500);
        });      
    });
</script>
于 2013-02-09T22:17:07.477 回答