Tengo ya una secuencia de comandos que se alterna entre cada una de span id de la lista que figura a continuación agregar la clase de activo y la eliminación de tan sólo 1 span id de elemento es 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>

Ahora lo que quiero hacer, es hacer dos botones (una especie de flechas) que le permiten navegar a través de span id.

Ejemplo:
Si span id p3 es visible y la flecha a la derecha -> es presionado ir automáticamente a span id p4. Si se pulsa la flecha izquierda <- volver a p3, y así sucesivamente.

Cualquiera puede ayudar? Gracias de antemano.

Matt

Lo has intentado? Por favor, venir para arriba con algunas código inicial, cuando usted tiene un problema surgido con el problema específico que usted está teniendo.
Lo que hace este «alternar» script? Proporcionar a su propio intento, o al menos una idea sobre cómo abordar el problema.

OriginalEl autor Matt | 2012-09-01

4 Comentarios

  1. 1

    demo
    http://jsfiddle.net/HhUBR/

    CÓDIGO

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

    OriginalEl autor Ashirvad

  2. 1

    Uso .eq() en conjunción con la aritmética modular el ciclo de los valores:

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

    gran solución!!!, podemos omitir » si (activeIdx == 0) {activeIdx =$abarca.longitud;}` como la ecualización también funciona con índice negativo: demo
    Genial! No sé nada de eso, gracias!

    OriginalEl autor João Silva

  3. 1

    Mi intento,

    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/

    OriginalEl autor Jashwant

  4. 0

    puede utilizar jQuery.next(".active") para seleccionar el siguiente objeto, para obtener el uso previo jQuery.prev(".active")

    Aquí está la demo del

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

    OriginalEl autor Ankur

Dejar respuesta

Please enter your comment!
Please enter your name here