1

ボタンがクリックされたときにli、結合each()とメソッドを使用してクラスを実行しようとしています。andeq()を除いて前と次のボタンで同じコードを使用していますが、別の問題が返されます。i+1i-1

ここに調べる jsFiddle があります。

html:

<span class="prev">prev</span>
<ul>
    <li>0</li>
    <li>1</li>
    <li class="active">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<span class="next">next</span>

jQuery:

var li = $('li');

$('.prev').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            li.removeClass('active');
            li.eq(i-1).addClass('active');
            //this is working better
            //problem is: not selecting 4
        }
    });
});

$('.next').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            //problem starts:
            //li.removeClass('active');
            //when this is active; all active classes are gone

            li.eq(i+1).addClass('active');
            //try to select next 'li' here
            //but it is selecting all li's bigger than current value
        }
    });
});
4

5 に答える 5

4

私はもっ​​と次のようなものを使ってみます:

ここではjsFiddleが動作しています。

$(".next").click(function(){
    if($("li.active").next().length > 0){
        $("li.active").removeClass("active").next("li").addClass("active");
    }
});
$(".prev").click(function(){
    if($("li.active").prev().length > 0){
        $("li.active").removeClass("active").prev("li").addClass("active");
    }
});​

「次の」セレクターを使用: Jquery Next

数学はできる限り避けています。数えるのは難しいです:-)。とはいえ、上記の問題はインデックスにある可能性があると思います。言いにくい。このようなリストを扱うときは、「li」のようなセレクターの使用は避けたいと思います。その「ul」部分にクラスを配置し、li を「.myList li」としてアドレス指定してみてください。

于 2012-08-13T13:06:17.730 に答える
1

return false;最初のクラスを見つけた後、次のことを行う必要がありますactive: http://jsfiddle.net/ufomammut66/np4Pt/

何が起こっているかというと、要素を繰り返し処理し、それぞれを順番に変更しています。したがって、各ケースを通過するときに、次のシーケンスをアクティブとして設定すると、次の$(this).hasClass('active')チェックが真になります。これが、前のイベントが機能している理由です。ループの逆の順序で移動しています。したがって、アクティブなケースが見つかったら、コレクションの反復処理を停止する必要があります。

編集 1

選択したオブジェクトで使用.lengthして、返される数を取得できます。したがって、提供されたサンプルコードではli.length、ページにある li 要素の数を取得するために使用できます。上限の計算に他の li 要素が使用されないようにするためだけに、クラス セレクターを使用することをお勧めします。これらの変更を反映するために jsFiddle を更新しました。

于 2012-08-13T13:05:10.850 に答える
1

何らかの理由でインデックスが必要な場合は、いつでも次のことができます。

$('.prev').on('click', function() {
    var i = $(".active").index();
        i--;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});

$('.next').on('click', function() {
    var i = $(".active").index();
        i = i >= $('li').length-1 ? 0 : i+1;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});​

フィドル

そうでない場合:

$('.prev, .next').on('click', function() {
    if ($(".active")[$(this).attr('class')]().index()!=-1)
    $(".active").removeClass('active')[$(this).attr('class')]().addClass('active');
});

フィドル

于 2012-08-13T13:10:47.977 に答える
0

次の更新された jsFiddle を試してください。

var li = $("li");

$(".prev").click(function() {
    var activeLI = $("li.active");
    var index = $(activeLI).index();

    $(activeLI).removeClass('active');

    if (index > 0) {
        $(activeLI).prev().addClass('active');
    } else {
        $(li).last().addClass('active');
    }
});

$(".next").click(function() {
    var activeLI = $("li.active");
    var index = $(activeLI).index() + 1;

    $(activeLI).removeClass('active');

    if (index < li.length) {
        $(activeLI).next().addClass('active');
    } else {
        $(li).first().addClass('active');
    }
});

これは、アクティブな最後の要素 (前の場合は最初) と最初の要素のアクティブ (次の場合は最後) にループします。

于 2012-08-13T13:21:14.073 に答える
0

これでも試すことができます：

$('.prev').click(function() {
    var el = $.find('li[class=active]'); 
    //check if are prev li
    if(!$(el).prev().is(':first')) $(el).removeClass('active').prev().addClass('active');
});

$('.next').click(function() {
    var el = $.find('li[class=active]'); 
    //check if are next li
    if(!$(el).next().is(':last')) $(el).removeClass('active').next().addClass('active');
});
于 2012-08-13T13:11:27.463 に答える