6

私は次のようなリストを持っています：

<ul>
  <li class="highlighted">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

N秒ごとに、「強調表示された」クラスを次の要素に移動したいと思います。兄弟がなくなったら、戻って最初から始めます。

誰かがこれを達成するためにjQueryを手伝ってもらえますか？

ありがとうございました！

4

5 に答える 5

6

このような何かがそれを行う必要があります：

HTML：

<ul id="myList">
  <li class="highlighted">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

javascript：

$(function() {
    var lis = $("#myList > li"),
        currentHighlight = 0;
        N = 5;//interval in seconds
    setInterval(function() {
        currentHighlight = (currentHighlight + 1) % lis.length;
        lis.removeClass('highlighted').eq(currentHighlight).addClass('highlighted');
    }, N * 1000);
});

デモ

于 2012-08-21T11:27:22.477 に答える
4

さて、基本的にあなたはこのようなことをするでしょう

    function highlight_next_li() {
        var current = jQuery('.highlighted'); // get the current highlighted
        var next = current.next();

        // if no next then we're at the end
        if( !next.length )
            next = current.parent().find('li:first'); // get the first li element in the parent

        next.addClass('highlighted');
        current.removeClass('highlighted');
    }

次に、setintervalを使用する必要があります。setintervalは、Xミリ秒ごとにset関数を繰り返します。

    var myinterval = setInterval( highlight_next_li, 3000 ); // repeat that javascrispt every 3 seconds

その後、繰り返しを停止したいとき

    clearInterval( myinterval );

これが実際の動作を確認するためのペンです：http：//codepen.io/sagetarian/pen/dpKku

于 2012-08-21T11:28:11.027 に答える
0

私はあなたが探しているものを実装しようとしました。http://jsfiddle.net/wudhd/ 同じことを達成するためにsetTimeoutとjqueryのn番目の子
を 見ることができます。

于 2012-08-21T11:33:27.093 に答える
0 
var n = 1;
setInterval(function() {
  var $li = $("li.highlighted"),
      $siblings = $li.siblings().andSelf(),
      next = ($li.index() + 1) % $siblings.length;
  $li.removeClass("highlighted");
  $siblings.eq(next).addClass("highlighted");
}, n * 1000);​ // Run every n seconds

フィドル。

于 2012-08-21T11:30:20.603 に答える
0

ご覧のとおり、これを行うためのさまざまな方法があります...変数などで現在のアイテムを追跡できます

とにかく別のものを紹介します。この方法は適切であり、リストへの動的な変更を処理できると思います。

ulにIDまたはクラスを指定し、それを特定してターゲットにできるようにする方法に依存します。もちろん、リストを動的に変更する場合は、変更後も1つのハイライトがあることを確認する必要があります。

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        setInterval(nextSibling, 10000);

        function nextSibling()
        {
            var family = $('#family').children();
            var i = $(family).filter('.highlighted').index();
            $(family[i]).removeClass('highlighted');
            $(family[(i+1)%family.length]).addClass('highlighted');
        }
</script>
<style>
    .highlighted { background: #dddddd; }
</style>

</head>
<body>
    <ul id="family">
      <li class="highlighted">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
</body>
</html>
于 2012-08-21T11:37:54.263 に答える