javascript - 在 jQuery 中使以下内容动态化

Question

我有一个用 jQuery 创建的脚本，它按照我希望的方式工作，但我只知道会有一种更简单、更动态的方式来执行以下操作。

我想知道是否有人可以帮助我？

好的，所以我的 HTML 结构是:

<div class="one_category category_list">
    <p>Option for 1 go here</p>
</div>

<div class="two_category category_list">
    <p>Option for 2 go here</p>
</div>

请注意，上面的内容重复了十次，只是类名发生了变化。如果包含数字更容易，我可以轻松更改标记。

然后是我的 jQuery，它可以被压缩并变得动态:

$(document).ready(function() {

    // Grid Layout - Number of Categories //

        var number_of_categories = $('.number_of_categories_list');
        if ( $(number_of_categories).val() == '1' ) {
            $('.one_category').show();
        } else if ( $(number_of_categories).val() == '2' ) {
            $('.one_category').show();
            $('.two_category').show();
        } else if ( $(number_of_categories).val() == '3' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
        } else if ( $(number_of_categories).val() == '4' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
        } else if ( $(number_of_categories).val() == '5' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
        } else if ( $(number_of_categories).val() == '6' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
        } else if ( $(number_of_categories).val() == '7' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
            $('.seven_category').show();
        } else if ( $(number_of_categories).val() == '8' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
            $('.seven_category').show();
            $('.eight_category').show();
        } else if ( $(number_of_categories).val() == '9' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
            $('.seven_category').show();
            $('.eight_category').show();
            $('.nine_category').show();
        } else if ( $(number_of_categories).val() == '10' ) {
            $('.one_category').show();
            $('.two_category').show();
            $('.three_category').show();
            $('.four_category').show();
            $('.five_category').show();
            $('.six_category').show();
            $('.seven_category').show();
            $('.eight_category').show();
            $('.nine_category').show();
            $('.ten_category').show();
        }


    $('.number_of_categories_list').change(function(){
        if ($(this).val() == '1') { 
            $('.one_category').slideDown();
        } else if ($(this).val() == '2') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
        } else if ($(this).val() == '3') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
        } else if ($(this).val() == '4') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
        } else if ($(this).val() == '5') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
        } else if ($(this).val() == '6') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
        } else if ($(this).val() == '7') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
            $('.seven_category').slideDown();
        } else if ($(this).val() == '8') {
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
            $('.seven_category').slideDown(); 
            $('.eight_category').slideDown();
        } else if ($(this).val() == '9') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
            $('.seven_category').slideDown(); 
            $('.eight_category').slideDown();
            $('.nine_category').slideDown();
        } else if ($(this).val() == '10') { 
            $('.one_category').slideDown();
            $('.two_category').slideDown();
            $('.three_category').slideDown();
            $('.four_category').slideDown();
            $('.five_category').slideDown();
            $('.six_category').slideDown();
            $('.seven_category').slideDown(); 
            $('.eight_category').slideDown();
            $('.nine_category').slideDown();
            $('.ten_category').slideDown();
        } else { }
    });

});

关于如何压缩 jQuery 元素有什么想法吗？

感谢您一如既往的帮助。

Answer 1

几乎不需要任何代码。只需使用您的公共(public)类并根据所选值对选择进行切片即可:

http://jsfiddle.net/TrueBlueAussie/4vxeuvhm/

$('.number_of_categories_list').change(function(){
    var count = $(this).val();
    var $lists = $('.category_list');    // All the lists
    var $show = $lists.slice(0,count);   // Just the ones we want to show
    var $hide = $lists.not($show);       // Everything that we do not want to show
    $show.slideDown();
    $hide.slideUp();
});
// trigger initial update
$('.number_of_categories_list').trigger("change");

我故意将其进一步缩短，因为这是一个可读的示例。

如果你走得太远，它会变得更短，但几乎无法阅读:

例如http://jsfiddle.net/TrueBlueAussie/4vxeuvhm/3/

var $lists = $('.category_list');
$lists.slice($('.number_of_categories_list').change(function () {
    var $show = $lists.slice(0, $(this).val()).slideDown();
    $lists.not($show).slideUp();
}).val()).hide();