Question

我已经有一个脚本在我下面列出的每个span id之间切换，添加class active并将其删除，因此只有1个span 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可见且箭头右 - ＆gt;自动按下转到span id p4。如果按向左箭头＆lt; - 返回到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");
  }
});

<强> DEMO

Answer 2

工作演示 http://jsfiddle.net/HhUBR/

<强> CODE

$('#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");
})

JQuery：检测哪个span id有class =“active”，如果按下了按钮，则转到另一个span id

4 个答案: