javascript - 如何压缩相似的重复jquery函数

Question

如果我的数学正确的话，我的 Jquery 文件比实际大小大 16 倍。

我正在构建一个选项卡式类别页面，如下所示..

标签1

• 猫1
• 猫2
• 等等

标签2

• 猫1
• 猫2
• 等等

所有内容一开始都是隐藏的，然后在单击类别标题中的按钮(也可以向上/向下切换箭头)时显示。

$("#tabName_contentLink_cat1").click(function(){

    $("#tabName_contentLink_cat1 > .arrow").toggleClass('greyArrow_down')  
                                           .toggleClass('blackArrow_up');
    $("#tabName_content_cat1").slideToggle("fast");

});

这段代码工作正常，但我已经重复了 16 次!

唯一不同的部分是“_cat1”末尾的数字。

如何转换这段代码，使其可以重复使用 16 次？

我是新手，所以请记住这一点。

<小时/>

在我心里；分配一些寻找的唯一标识符(适用的类别号)，将其收集在 jQuery 变量 onClick 中，然后像前进的方式粘贴在每个 _cat'HERE' 接缝的末尾。但我不知道如何执行它。

谢谢

Answer 1

您可以向所有 cat 元素添加另一个类，然后将其用作选择器，或者您可以执行我所做的操作。请注意，我使代码更小、更高效。它通过使用 Function 来完成您想要的事情。

addClick(cat1);
addClick(cat2);
addClick(cat3);
addClick(cat4);

function addClick(x) {
$("#tabName_contentLink_"+x).click(function(){
    $(this).slideToggle("fast").children(".arrow")
           .toggleClass('greyArrow_down blackArrow_up');
});}