Как создать простую триггерную кнопку «Далее» и «Предыдущая» для кнопок разбиения на страницы ползунка?

Я пытаюсь перенести класс между li с помощью методов объединения each() и eq() при нажатии кнопок. Я использую тот же код с кнопками «предыдущий» и «следующий», кроме i+1 и i-1, но он возвращает мне разные проблемы.

Вот jsFiddle для изучения.

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

javascript html click jquery each
person Barlas Apaydin    schedule 13.08.2012    source источник

Ответы (5)


arrow_upward
1
arrow_downward

Если по какой-то причине вам нужен индекс, вы всегда можете сделать:

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

FIDDLE

Если не :

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

FIDDLE

person adeneo    schedule 13.08.2012
comment
+1 от меня, мне нужна была непрерывная структура навигации. Можете ли вы объяснить свой первый метод? - person Barlas Apaydin; 13.08.2012
comment
особенно я не понимаю эту строку: i = i ›= $('li').length-1 ? 0: я+1; - person Barlas Apaydin; 13.08.2012
comment
Если i больше или равно длине li, то есть количеству элементов списка, снова начните с нуля, в противном случае просто добавьте единицу к i. Это троичное выражение (if/else)! - person adeneo; 13.08.2012

arrow_upward
4
arrow_downward

Я бы попробовал использовать что-то вроде:

Вот работает 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");
    }
});​

с помощью селектора «Далее»: Jquery Next

Я избегаю математики, когда это возможно. Считать сложно :-). Тем не менее, я думаю, что ваша проблема выше может быть связана с файлом index. Сложно сказать. Я бы не стал использовать селекторы типа «li» при работе с таким списком. Попробуйте поместить класс в его часть «ul» и адресовать свои li как: «.myList li»

person Aaron Romine    schedule 13.08.2012

arrow_upward
1
arrow_downward

Вам следует return false; после того, как вы найдете свой первый класс active: http://jsfiddle.net/ufomammut66/np4Pt/

Происходит то, что вы перебираете элементы, продвигаясь вперед и меняя каждый по порядку. Таким образом, когда вы проходите через каждый случай, вы устанавливаете следующий по порядку как активный, что, в свою очередь, делает следующую проверку $(this).hasClass('active') истинной. Вот почему событие prev работает, мы движемся в обратном порядке цикла. Так что нам просто нужно перестать перебирать нашу коллекцию после того, как мы найдем наш активный случай.

Изменить 1

Вы можете использовать .length для любого выбранного объекта, чтобы узнать, сколько из них будет возвращено. Таким образом, в приведенном вами примере кода мы можем использовать li.length, чтобы получить количество элементов li на странице. Вы можете использовать селектор класса только для того, чтобы убедиться, что другие элементы li не используются для расчета вашего потолка. Я обновил jsFiddle, чтобы отразить эти изменения.

person ShortRound1911    schedule 13.08.2012
comment
как мы можем использовать значение if( i+1 ‹ 5){ ... } 5 для варианта, который означает, сколько li мы получили всего? - person Barlas Apaydin; 13.08.2012
comment
Обновлен ответ, чтобы включить это. - person ShortRound1911; 13.08.2012

arrow_upward
0
arrow_downward

Вы можете попробовать даже это:

$('.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');
});
person Alex Ball    schedule 13.08.2012

arrow_upward
0
arrow_downward

Попробуйте следующий обновленный 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');
    }
});

Это зациклится на последнем активном элементе (если предыдущий на первом) и первом активном элементе (если следующий на последнем).

person Paul Aldred-Bann    schedule 13.08.2012