Wie erstellen Sie einfach next und prev trigger-Knopf für Schieberegler, die Paginierung Tasten?

Ich versuche zu tragen, eine Klasse zwischen li's mit kombinieren each() und eq() Methoden, wenn Schaltflächen angeklickt. Ich verwende den gleichen code mit previous und next Tasten, mit Ausnahme i+1 und i-1 aber es ist wieder, mir verschiedene Probleme.

Hier ist das jsFiddle zu untersuchen.

html:

<span class="prev">prev</span>
<ul>
    <li>0</li>
    <li>1</li>
    <li class="active">2</li>
    <li>3</li>
    <li>4</li>
</ul>
<span class="next">next</span>

jQuery:

var li = $('li');

$('.prev').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            li.removeClass('active');
            li.eq(i-1).addClass('active');
            //this is working better
            //problem is: not selecting 4
        }
    });
});

$('.next').click(function() {
    li.each(function(i) {
        if ( $(this).hasClass('active') ) {
            console.log(i);
            //this returning current true value = 2

            //problem starts:
            //li.removeClass('active');
            //when this is active; all active classes are gone

            li.eq(i+1).addClass('active');
            //try to select next 'li' here
            //but it is selecting all li's bigger than current value
        }
    });
});

InformationsquelleAutor Barlas Apaydin | 2012-08-13

Wenn aus irgendeinem Grund müssen Sie den index, können Sie immer tun:

$('.prev').on('click', function() {
    var i = $(".active").index();
        i--;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});

$('.next').on('click', function() {
    var i = $(".active").index();
        i = i >= $('li').length-1 ? 0 : i+1;
    $(".active").removeClass('active');
    $('li').eq(i).addClass('active');
});

GEIGE

Wenn nicht :

$('.prev, .next').on('click', function() {
    if ($(".active")[$(this).attr('class')]().index()!=-1)
    $(".active").removeClass('active')[$(this).attr('class')]().addClass('active');
});

GEIGE

+1 von mir, ich brauchte nicht stoppen nav-Struktur. Können Sie erklären, Ihre ersten Methode ?
vor allem verstehe ich nicht, diese Zeile: i = i >= $('li').Länge-1 ? 0 : i+1;
Wenn i ist gleich oder mehr als die Länge des li, die die Anzahl der Listenelemente, dann starten Sie bei null wieder an, ansonsten nur hinzufügen zu i. Es ist ein ternärer Ausdruck (if / else)!

InformationsquelleAutor adeneo

3

Ich würde versuchen mit etwas mehr wie:

Hier arbeitet jsFiddle.
```
$(".next").click(function(){
    if($("li.active").next().length > 0){
        $("li.active").removeClass("active").next("li").addClass("active");
    }
});
$(".prev").click(function(){
    if($("li.active").prev().length > 0){
        $("li.active").removeClass("active").prev("li").addClass("active");
    }
});
```
mit der 'weiter', selector: Jquery Next

Ich vermeiden, dass die Mathematik, wenn möglich. Zählen ist schwer :-). Das sagte ich mir denke, dein problem oben mit dem index. Schwer zu sagen. Ich möchte vermeiden, mit Hilfe von Selektoren wie "li" im Umgang mit einer Liste wie dieser. Versuchen Sie, eine Klasse, die 'ul' Teil von ihm und auf Ihre li ' s als: ".meineliste li"
- +1 für die gute Antwort
InformationsquelleAutor Aaron Romine
1

Sollten Sie return false; nachdem Sie Ihre erste Klasse active:
http://jsfiddle.net/ufomammut66/np4Pt/

Was passiert ist Ihr Iteration über die Elemente bewegen sich und verändern sich gegenseitig in Ordnung. So, wie Sie gehen durch jeden Fall Ihre Einstellung an die nächste in der Reihenfolge, wie aktiv die wiederum macht den nächsten $(this).hasClass('active') check wahr. Dies ist der Grund, warum die Vorherige Ereignis zu arbeiten, wir ziehen in umgekehrter Reihenfolge aus der Schleife. So brauchen wir nur zu stoppen, Durchlaufen unsere Sammlung nach finden wir unsere aktiven Fall.

Bearbeiten 1

Können Sie .length auf jedes ausgewählte Objekt zu bekommen, wie viele zurückgegeben werden. Also in dem Beispiel-code, den Sie zur Verfügung gestellt, das wir verwenden können li.length zu bekommen, wie viele li-Elemente auf der Seite. Sie möchten möglicherweise verwenden Sie einen Klassenselektor, nur um sicherzustellen, dass andere li-Elemente nicht verwendet werden, um zu berechnen Ihre Decke. Ich habe aktualisiert die jsFiddle, um diese änderungen widerzuspiegeln.
- wie können wir verwenden, wenn( i+1 < 5){ ... } den Wert von 5 für eine Variante, die steht, wie viele li 's haben wir insgesamt?
- Aktualisierte Antwort auf diese aufzunehmen.
InformationsquelleAutor ShortRound1911

Könnten Sie versuchen, auch diese:

$('.prev').click(function() {
    var el = $.find('li[class=active]'); 
    //check if are prev li
    if(!$(el).prev().is(':first')) $(el).removeClass('active').prev().addClass('active');
});

$('.next').click(function() {
    var el = $.find('li[class=active]'); 
    //check if are next li
    if(!$(el).next().is(':last')) $(el).removeClass('active').next().addClass('active');
});

InformationsquelleAutor Alex Ball

Versuchen Sie, die folgenden aktualisierten jsFiddle:

var li = $("li");

$(".prev").click(function() {
    var activeLI = $("li.active");
    var index = $(activeLI).index();

    $(activeLI).removeClass('active');

    if (index > 0) {
        $(activeLI).prev().addClass('active');
    } else {
        $(li).last().addClass('active');
    }
});

$(".next").click(function() {
    var activeLI = $("li.active");
    var index = $(activeLI).index() + 1;

    $(activeLI).removeClass('active');

    if (index < li.length) {
        $(activeLI).next().addClass('active');
    } else {
        $(li).first().addClass('active');
    }
});

Dies wird eine Schleife Durchlaufen, um Letzte element aktiv ist (wenn der Vorherige auf den ersten) und das erste element aktiv ist (wenn der nächste auf der Letzte).

InformationsquelleAutor Paul Aldred-Bann

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.