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

以下は 4.5 秒待ってhighlightedから、要素内のすべての要素からクラスを削除し、newsそれを に置き換えsimpleます。

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

一度に 1 つずつ実行する場合は、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 に答える
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 に答える