Javascript 在jQuery中创建以下动态

我有一个我在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元素的想法

---

一如既往地感谢您的帮助。

几乎不需要任何代码。只需使用您的公共类并根据所选值对所选内容进行切片：

我有意让它更进一步，因为这是一个可读的示例

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

e、 g

---

很可能是这样的：

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

---

给他们上一堂普通课。类别听起来很合适/合适。它们都有相同类别的类别列表，但是如果我以此为目标，它只会显示它们。它们都有一个公共类，并使用数组切片从集合中分离出你想要的。哎呀，我误解了。抱歉。太好了，这正是它以前的工作方式，不过，这是一种更好的方式-谢谢你的帮助。

$('.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");

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

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