Question

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

我正在构建一个类似于此的标签类别页面。

TAB1

CAT1
CAT2
等

TAB2

CAT1
CAT2
等

所有内容均以隐藏方式开始，然后在点击类别标题中的按钮时显示（同时向上/向下切换箭头）。

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

Answer 2

怎么样？

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

});

这不是最优雅的代码，但应该有效。

Answer 3

给他们所有tabName_contentLink课程，然后：

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

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

});

关键字this允许您引用调用函数的对象，因此与集合中的特定对象相关。它可能变得有点棘手，但基本上 - 你可以像上面所描述的那样使用它。

Answer 4

为什么不使用简单的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");

  });
}

还有其他选择，但这似乎是在不改变现有代码的情况下使其工作的最快捷方式。为了使它更通用，你可以将它包装在一个接收'i'作为参数的函数中。

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

4 个答案: