0

私のページには、各liが異なるコンテンツ ブロックを表すリストがあります。

目に見えるブロックが 1 つだけ必要です。クラス 'visible'のliが表示されます。

次のボタンをクリックすると、可視クラスが次のliに移動します。前のボタンと同じです。

そして最後まで来たらまた最初からやり直したい。最初のもので「Prev」を押すと、最後のものに移動する必要があります。

私はjqueryを始めているので、助けが必要です!

HTML 構造

<ul class="container">
    <li>item1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
<button type="button" class="prev">prev</button>
<button type="button" class="next">next</button>

CSS

.container li { display:none; }
.container li.visible { display:block; }

JS

$(document).ready(function() {
    $('.container li:first-child').addClass('visible');
});

var numberOfItems =  $('.container li').size();

$('.next').click(function(){
    $('.container').find('.visible').removeClass('visible').next().addClass('visible');
});

$('.prev').click(function(){
    $('.container').find('.visible').removeClass('visible').prev().addClass('visible');
});

私はそこに立ち往生しています！このコードはあまり良くないと感じており、「循環」機能が必要です。誰でも助けることができますか？

4

1 に答える 1

2

これを見てみましょう次と前のボタンを使用して表示されているリスト項目を交換する方法? リンク、これは必要な答えを得るのに役立ちます。次のボタンをクリックすると、表示されているクラスが次の li に移動します。これは前のボタンと同じです。そして、最後まで到達すると、Prev ボタンと同様に、最初からやり直します。
//次へ

 if (index == (length - 1)) {
            $('li').first().removeClass('invisible').addClass('visible');
        }

//前の場合

if (index == 0) {
        $('li').last().removeClass('invisible').addClass('visible');
    }

これがあなたにもっと役立つことを願っています。ではごきげんよう。

于 2013-02-13T11:53:21.800 に答える