Javascript 如何压缩类似的重复jquery函数

如果我的数学是正确的，我的Jquery文件比它可能的大16倍

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

表1

• 第一类
• 第二类
• 等

表2

• 第一类
• 第二类
• 等

所有内容都从“隐藏”开始，然后在单击类别标题中的按钮时显示（同时向上/向下切换箭头）

这段代码运行良好，但我已经重复了16次

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

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

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

---

在我心中；分配一些唯一标识符（适用的类别号），将其收集到jQuery变量onClick中，然后粘贴到每个_cat'HERE'接缝的末尾，就像前面的方法一样。但我不知道该怎么做

---

谢谢

给他们所有的

tabName\u contentLink

类，然后：

$(".tabName_contentLink").click(function(){

    $(this).children(".arrow").toggleClass('greyArrow_down')
        .toggleClass('blackArrow_up');
    $(this).find(".tabName_content").slideToggle("fast");

});

---

关键字

this

允许您引用调用函数的对象，从而与集合中的特定对象关联。它可能会变得有点棘手，但基本上-您可以如上所述使用它。

您可以向所有cat元素添加另一个类，然后将其用作选择器，或者您可以执行我所做的操作。注意，我使代码更小、更高效。它通过使用函数实现了您想要的功能

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');
});}

---

为什么不使用一个简单的for循环呢

for(var i = 1; i <= 16; i++){
  $("#tabName_contentLink_cat" + i).click(function(){

      $("#tabName_contentLink_cat" + i + " > .arrow").toggleClass('greyArrow_down')  
                                             .toggleClass('blackArrow_up');
      $("#tabName_content_cat" + 1).slideToggle("fast");

  });
}

for（var i=1；i

$("[id^='tabName_contentLink_cat']").click(function(){

  $(this).children(".arrow").toggleClass('greyArrow_down')  
                            .toggleClass('blackArrow_up');

  var contentId = this.id.replace(/contentLink/, 'content');
  $("#"+ contentId).slideToggle("fast");

});

这不是最优雅的代码，但它应该可以工作。
google:
重构提取方法
现在就这样做！使用类而不是ID，然后通过DOM遍历方法将元素彼此关联起来，如
.find（）
和
.closest（）
。您可以向所有cat元素添加另一个类，并选择该类。这样，所有cat元素都会将函数附加到其单击处理程序。您是否注意到
.slideToggle（）
与
不在同一个元素上。click（）
？几乎完成了此操作，但仍停留在addClick（）上字面上说，我不知道该怎么处理它或者它是什么。有没有一个术语我可以在谷歌上搜索？谢谢，点击是我做的一个函数。你想在哪里写cat1，cat2等等。你只需在addClick（1）中写1，2，3，…你可以写“addClick（'cat1'））“但我做了它，所以你甚至不必编写cat，只需编写1,2,3，……你的语法看起来很棒，但我在实现它时仍然有问题。你觉得这个提琴怎么样？第一，你的左边没有jquery。第二，没有id
#tabName\u contentLink\u cat1
可见的元素……这个怎么样？告诉我你想要什么虽然在css中，除了webkit之外，我没有包括任何用户选择、光标和其他浏览器。你可以通过用moz等替换webkit来添加它。。。
$("[id^='tabName_contentLink_cat']").click(function(){

  $(this).children(".arrow").toggleClass('greyArrow_down')  
                            .toggleClass('blackArrow_up');

  var contentId = this.id.replace(/contentLink/, 'content');
  $("#"+ contentId).slideToggle("fast");

});