Question

我写了一个基本函数来在页面上显示更多元素。我有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。我知道如何禁用按钮。

感谢

Answer 1

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

Answer 2

假设您的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。已经显示的元素将自动从中删除。

使用jQuery如何在click事件后运行一个函数

2 个答案: