JQuery: detectar qué span id ha class=»active» y si se pulsa el botón de ir a otra span id

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 Kommentare

  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

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...