限制元素,当我点击更多来加载另一个元素

时间:2013-09-25 06:33:49

标签: javascript jquery

我尝试的代码是

jQuery(function($) {
var visible =3;
$('#sc li:gt('+(visible - 1)+')').hide();    
$('#more').click(function() {      
    var Index = $('#sc').children('li:visible:last').index(),
    nextIndex = currentIndex + (visible + 1);
    $('#sc li').hide();        
    $('ul li:lt(' + nextIndex + '):gt(' + Index + ')').show();        
    });    
});

我想限制元素,但是当我点击时,什么都不会发生。

1 个答案:

答案 0 :(得分:1)

主要问题是你在下一行定义Index变量并使用currentIndex,这当然会引发错误,否则你的代码应该有效。但是,您可以缓存元素并使用.slice()方法来提高代码的效率。

jQuery(function ($) {
    var visible = 3,
            $li = $('#sc li');

    // hiding the elements
    $li.slice(visible).hide();

    $('#more').on('click', function () {
        // getting index of the last visible element
        var ci = $li.filter(':visible:last').index();
        // slicing and showing next should-be-visible elements
        $li.hide().slice(++ci, ci+visible).show();
    });
});

http://jsfiddle.net/xRPQj/