-1

以下にリストしたすべてのスパン ID 間でトグルするスクリプトが既に 1 つあり、アクティブなクラスを追加して削除するため、1 つのスパン ID 要素のみが表示されます。

<div id="b_pager">
<span id="p1" class="active"></span>
<span id="p2"></span>
<span id="p3"></span>
<span id="p4"></span>
<span id="p5"></span>
</div>

今私がやりたいことは、スパン ID をナビゲートできるようにする 2 つのボタン (矢印のようなもの) を作成することです。

例: スパン ID p3 が表示され、右矢印 -> が押された場合、自動的にスパン ID p4 に移動します。左矢印 <- を押すと、p3 に戻ります。

誰でも助けることができますか？前もって感謝します。

マット

4

4 に答える 4

1

私の試み、

JS

 $(document).ready(function() {
        var counter = 0;
        $('#right_btn').click(function () {
           var spans  = $('#b_pager').find('span');
           var index = ++counter % spans.length;   // TO CYCLE 
           spans.eq(index - 1 ).removeClass('active').end()
             .eq(index).addClass('active');
        });
    });​

HTML

<div id="b_pager">
<span id="p1" class="active">first</span>
<span id="p2">second</span>
<span id="p3">third</span>
<span id="p4">forth</span>
<span id="p5">fifth</span>
</div>
<button id='right_btn'>Right</button>
​

CSS: 

 #b_pager span {
     display:none;
    }

    #b_pager span.active {
     display:block;
    }

http://jsfiddle.net/sqBQ9/

于 2012-09-01T19:15:54.803 に答える
1

.eq()モジュラー演算と組み合わせて使用​​して、値を循環させます。

$("#next,#prev").click(function () {
  var $pager = $("#b_pager"),
      $spans = $pager.find("span"),
      activeIdx = $spans.filter(".active").removeClass("active").index();
  if (this.id == "next") {
    $spans.eq((activeIdx + 1) % $spans.length).addClass("active");
  } else {
    $spans.eq(activeIdx - 1).addClass("active");
  }
});

デモ。

于 2012-09-01T18:59:45.953 に答える
1

動作デモ http://jsfiddle.net/HhUBR/

コード

$('#next').click(function() {
    if ($('span:last').hasClass('active')) {
        $('#next').attr('disabled', true)
    }
    else {
        $('.active').removeClass().next().addClass('active');
    }
})

$('#prev').click(function() {
    if ($('span').eq(0).hasClass('active')) {
        $('#prev').attr('disabled', true)
    }
    else {
        $('.active').removeClass().prev().addClass('active')
    }
})​
于 2012-09-01T19:02:21.427 に答える
0

jQuery.next(".active")次のオブジェクトを選択するために使用でき、以前の使用を取得できますjQuery.prev(".active")

ここに動作デモがあります

http://jsfiddle.net/LGBY8/

$("#next").click(function() {
    var or = $(".active");
    if($(".active").next().length!=0)
     $(".active").next().addClass("active");
    else
        $($(".active").parent().children().get(0)).addClass("active");
    $(or).removeClass("active");
})
$("#previous").click(function() {
    var or = $(".active");
    if($(".active").prev().length!=0)
     $(".active").prev().addClass("active");
    else
        $($(".active").parent().children().get(-1)).addClass("active");
    $(or).removeClass("active");
})

</p>

于 2012-09-01T18:48:18.637 に答える