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

几乎不需要任何代码。只需使用您的公共类，并根据所选值切片选择：

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");

我故意将其进一步删除，因为这只是一个可读的例子。

如果你把它拉得太远，它会变短但几乎不可读：

e.g。 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();

Answer 2

最有可能是这样的：

// Grid Layout - Number of Categories //
var number_of_categories = $('.number_of_categories_list');
var categories_list = $('.categories_list');
categories_list.slice(0, number_of_categories.val()).show();

number_of_categories_list.change(function(){
    categories_list.slice(0, this.val()).slideDown();
});

在jQuery中实现以下动态

2 个答案: