0

我编写了一个基本函数来在页面上显示更多元素。我总共有 8 个项目，我一次显示 3 个。如果用户单击“显示”一次，他们将获得 3 个以上的项目。如果他们再次单击它，他们会得到最后 2 个。但是我想禁用“更多”按钮。

function showMoreRelated(count){
    var hiddenEls = $('#ps-item-related-contents .related-contents > div.row:hidden');
    var countArray=[];i=0;while(countArray.push(i++)<count);

    if (hiddenEls.length>0)
        {
            hiddenEls.each(function(i){ 
                if($.inArray(i, countArray) > -1)
                {
                    $(this).show();
                }
            });
            // CHECK NUMBER OF hiddenEls, disable button if # is 0
        } 
}

$('.related-items-more a').click(function(e){
    e.preventDefault();
    showMoreRelated(3);
});

我有一条评论，我认为我需要运行它，但我不知道要运行什么来重新检查 hiddenEls。我确实知道如何禁用该按钮。

谢谢

4

2 回答 2

0 
var normalShow = 3;
var showMore = 2;
var showing = 0;

function showRelated(){
    var hiddenEls = $('#ps-item-related-contents .related-contents > div.row:hidden');
    if (showing === 0) {
        for (var i = 0; i < normalShow; i++) {
            hiddenEls[i].show();
        }
        showing = normalShow;

    } else if (showing === normalShow) {
        for (var i = 0; i < showMore; i++) {
            hiddenEls[i].show();
        }
        showing += normalShow;

    } else {
        $('.related-items-more a').prop('enabled', false);
    }
}

$('.related-items-more a').click(function(e){
    e.preventDefault();
    showRelated();
});
于 2013-09-13T19:08:48.727 回答
0

假设您的 HTML$('#ps-item-related-contents .related-contents > div.row:hidden')确实是定位隐藏元素的最有效方法，那么您可能只需要：

function showMoreRelated(count){
    var hiddenEls = $('#ps-item-related-contents .related-contents > div.row:hidden');

    if (hiddenEls.length <= count) {
        $('.related-items-more a').off('click');  //disables button
        $('.related-items-more a').on('click',function(){return false;});  // stops link
    }

    while (count--) {
        if (hiddenEls[count]) {
            // needs to be wrapped inside an if because there could be less
            // hidden elements than the value of count

            hiddenEls.eq(count).show()   // shows divs
        } 
    }

}

$('.related-items-more a').click(function(e){
    e.preventDefault();
    showMoreRelated(3);
});

由于 hiddenEls 每次都是一个新变量，因此您无需为countArray. 那些已经显示的元素将自动从中删除。

于 2013-09-13T19:30:15.017 回答