jQuery - 更优雅的脚本编写方式

Question

我有以下脚本:

• 它根据可见“li”的数量创建选项卡
• 请注意，这只是脚本的一部分 - 我正在寻找简写 - 聪明的想法来编写等等。

你能建议任何简写吗？或者更优雅的写法？任何建议都非常感激。

    var CoundNumberOfDivs = $('#portfolio-items li:visible').length;

    if( CoundNumberOfDivs <= 4 ) { 
        $('.pagination li a').hide(); 
        return false;
    }
    else if( CoundNumberOfDivs <= 8 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(2)').show(); 

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show();
    }
    else if( CoundNumberOfDivs <= 12 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(3)').show(); 

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show();
    }
    else if( CoundNumberOfDivs <= 16 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(4)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }
    else if( CoundNumberOfDivs <= 20 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(5)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

    else if( CoundNumberOfDivs <= 24 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(6)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

    else if( CoundNumberOfDivs <= 28 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(7)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

    else if( CoundNumberOfDivs <= 32 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(8)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

    else if( CoundNumberOfDivs <= 36 ) { 
        $('.pagination li a').hide();
        $('.pagination li a:lt(9)').show();

        $('#portfolio-items li').hide();
        $('#portfolio-items li:lt(4)').show(); 
    }

Answer 1

这尚未经过测试，但乍一看它可以工作。我只使用一个，而不是所有 else if 语句，并将 CoundNumberOfDivs 除以 4，向上舍入，然后在 :lt 中使用它> 选择器的一部分:

var CoundNumberOfDivs = $('#portfolio-items li:visible').length;
$('.pagination li a').hide(); 
if( CoundNumberOfDivs <= 4 ) { 
    return false;
}
else {
    var num = Math.ceil(CoundNumberOfDivs / 4);
    $('.pagination li a:lt(' + num + ')').show(); 
    $('#portfolio-items li').hide();
    $('#portfolio-items li:lt(4)').show();
}

我还将 $('.pagination li a').hide(); 行移到 if 之外，因为它在您的 中重复if 和所有 else if。