Когда все больше и больше ссылок нажимают, элементы списка отображаются / скрываются с помощью Jquery - PullRequest
Новая
       7

Когда все больше и больше ссылок нажимают, элементы списка отображаются / скрываются с помощью Jquery

2 голосов
/ 20 октября 2011

У меня есть большой список предметов, который я хотел скрыть, и тогда кнопка с именем #more высеет еще 5.До сих пор я мог показать больше, но когда я показываю меньше с помощью кнопки #less, скрипт застрял.

следующий мой код и скрипка тоже

HTML 

<a href="#" id="more">more</a>
<a href="#" id="less">less</a>

<ul>
    <li>1</li>
    <li>2</li>
    ...
    <li>3</li>
</ul>

jQuery 

jQuery(function($) {
    var visible = 7;
    $('ul li:gt('+(visible - 1)+')').hide();

$('#more').click(function() {
    if ($('ul li:visible:last').is(':last-child')) {
        return false;
    }

    var currentIndex = $('ul').children('li:visible:last').index(),
        nextIndex = currentIndex + (visible + 1);
    $('ul li').hide();
    $('ul li:lt(' + nextIndex + '):gt(' + currentIndex + ')').show();
});

$('#less').click(function() {
    if ($('ul li:visible:first').is(':first-child')) {
        return false;
    }

    var currentIndex = $('ul').children('li:visible:first').index();
    var prevIndex = (currentIndex - (visible + 1));

    $('ul li').hide();
    if(prevIndex == 0)
        $('ul li:lt(' + currentIndex + ')').show();
    else
        $('ul li:lt(' + currentIndex + '):gt(' + prevIndex + ')').show();
});
});

Ответы [ 2 ]

3 голосов
/ 20 октября 2011

Это делает то, что я думаю, что вы хотите, и это намного чище, вы делали намного больше вызовов jQuery, чем было необходимо. 

jQuery(function($) {
    var visible = 7, $lis = $('ul li'), max = $lis.length;        
    function showUpToIndex(index) {
        $lis.hide();
        $lis.slice(0, index).show();
    }

    showUpToIndex(visible);

    $('#more').click(function(e) {
        e.preventDefault();
        visible = visible + 5;
        if (visible > max) visible = max;

        showUpToIndex(visible);
    });

    $('#less').click(function(e) {
        e.preventDefault();
        visible = visible - 5;
        if (visible < 0) visible = 0;

        showUpToIndex(visible);
    });
});

http://jsfiddle.net/cUUfS/12/

0 голосов
/ 20 октября 2011

так что проблема с вашим currentIndex в вашей функции less. Он находит только индекс элементов VISIBLE, а не индекс вашего ПЕРВОГО li, который виден из ВСЕХ ваших элементов, если вы видите, что я говорю. Ответ @Richard D выглядит хорошо для меня, но если вы хотите знать, где была ваша проблема, я думаю, что она начинается там

...