JQuery: detect which span id has class="active" and if button is pressed go to another span id

Question

I've got already one script that is toggling between every of span ids i've listed below adding class active and removing it so only 1 span id element is visible.

<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>

Now what i want to do, is make two buttons (sort of arrows) that will allow to navigate throught span ids.

Example: If span id p3 is visible and arrow right -> is pressed automatically go to span id p4. If pressed arrow left <- go back to p3, and so on.

Any one can help? Thanks in advance.

Matt

What have you tried? Please come up with some initial code, when you have a issue come up with the specific issue you are having. — sabithpocker, Sep 01 '12 at 18:54
What does this "toggling" script do? Provide your own attempt or at least an idea on how to approach your problem. — Armatus, Sep 01 '12 at 19:16

João Silva · Answer 1 · 2012-09-01T19:06:05.837

1

Use .eq() in conjunction with modular arithmetic to cycle the values:

$("#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.

edited Sep 01 '12 at 19:06

answered Sep 01 '12 at 18:59

João Silva

89,303
29
152
158

1

great solution!!!, we can omit ` if (activeIdx == 0) {activeIdx =$spans.length;}` as eq also works with negative index: **[demo](http://jsfiddle.net/teyK2/1/)** – Ankur Sep 01 '12 at 19:04

score 1 · Accepted Answer · answered Sep 01 '12 at 19:02

working demo 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')
    }
})

score 1 · Answer 3 · answered Sep 01 '12 at 19:15

My attempt,

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/

Ankur · Answer 4 · 2012-09-01T18:58:53.253

you can use jQuery.next(".active") to select next object, to get previous use jQuery.prev(".active")

Here is the working demo

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: detect which span id has class="active" and if button is pressed go to another span id

4 Answers4