jquery - JQuery：检测哪个 span id 具有 class="active"，如果按下按钮，则转到另一个 span id

Question

我已经有一个脚本可以在下面列出的每个跨度 id 之间切换，添加活动类并将其删除，因此只有 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。

示例：如果 span id p3 可见并且向右箭头 -> 自动按下，则转到 span id p4。如果按下向左箭头 <- 返回 p3，依此类推。

任何人都可以帮忙吗？提前致谢。

马特

Answer 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");
  }
});

演示。

Answer 2

工作演示 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')
    }
})​

Answer 3

我的尝试，

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/

Answer 4

您可以使用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>