jQuery Пред. Следующее улучшение плагина - PullRequest
0 голосов
/ 15 февраля 2012

Мне нужно пройти элементы с предыдущими и следующими кнопками.Вот HTML:

    <ul>
        <li><a href="#">Number 1 item</a></li>
        <li><a href="#">Number 2 item</a></li>
        <li><a href="#">Number 3 item</a></li>
        <li><a href="#">Number 4 item</a></li>   
    </ul>
<input type="button" class="next" value=">" />
<input type="button" class="prev" value="<" />

JS:

(function(){
    var $lis = $('ul li');
    var index = 0, lastIndex = 0;

    start(); // activate first, add event listeners to buttons

    function next(){
        lastIndex = index;
        if(++index == $lis.length) index = 0; // if next is out of bounds go to first
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
    };

    function prev(){
        lastIndex = index;
        if(--index < 0) index = ($lis.length - 1); // if prev is less than first to to last
        $lis.eq(index).addClass('active');
        $lis.eq(lastIndex).removeClass('active');
    };
    function start(){
        $lis.eq(0).addClass('active');
        $('.next').click(next);
        $('.prev').click(prev);
    }
})();

Этот плагин отлично работает, Вот Fiddle

Но я хочу расширить егофункциональность.Я также хочу активировать прямой щелчок на списке и запомнить его индекс.

Что я имею в виду: скажем, я дошел до пункта № 3, нажимая следующую кнопку, и если я непосредственно нажму
<li><a href="#">Number 1 item</a></li> (элемент №: 1), то я хочу запомнить свойэта позиция в качестве текущего индекса, и когда я нажимаю на следующую кнопку, я должен перейти к элементу №2

То же самое относится и к предыдущей кнопке.

Как я могу расширить эту функцию?

1 Ответ

1 голос
/ 15 февраля 2012
function li_click(){
    lastIndex = index;
    index = $(this).index();
    $lis.eq(index).addClass('active');
    $lis.eq(lastIndex).removeClass('active');
}

function start(){
    $lis.eq(0).addClass('active');
    $('.next').click(next);
    $('.prev').click(prev);
    $lis.click(li_click);
}

Вот обновленная версия вашего JSFiddle: http://jsfiddle.net/Rtmdj/15/

Также не похоже, что вам действительно нужна переменная lastIndex, вы можете просто удалить класс active,измените index, затем добавьте класс active к новому index:

$lis.eq(index).removeClass('active');
index = $(this).index();
$lis.eq(index).addClass('active');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...