Question

我不熟悉jQuery，我有冗余的jQuery调用，我想把它们放在循环中。

$('.class1').on('click', function () { ...
$('.class2').on('click', function () { ...
$('.class3').on('click', function () { ...
$('.class4').on('click', function () { ...
$('.class5').on('click', function () { ...
...

这是一个完整的电话：

$('.class1').on('click', function () { 
     if ($('.anotherclass1').is(':visible')) { 
         $(this).text("Show"); $('.anotherclass1').hide(); 
     } else { 
         $(this).text("Hide"); $('.anotherclass1').show(); 
     } 
});

有没有办法在没有重复的情况下做到这一点？

这是我的JsFiddle

Answer 1

如果您确定这些元素只有一个类名，可以在属性上使用使用运算符启动。我不愿意在实践中使用它，因为有很多更好的解决方案。

$('[class^=class]').on('click' ...

更好的解决方案需要查看您的实际HTML结构。

由于某些人反对：@)抱怨这个答案的完整性，你的完整代码现在看起来像这样：

$('[class^=class]').on('click', function() {
    $('.another' + this.className).toggle();
});

演示：http://jsfiddle.net/9vj3wagt/2/

Answer 2

假设您的所有商品都具有相同的商品someclass和数据属性data-target="#someotherid"：

JSFiddle： http://jsfiddle.net/TrueBlueAussie/9vj3wagt/1/

$('.someclass').on('click', function () { 
     var selector = $(this).data("target");
     $(selector).toggle();
});

这将使用属性中的选择器来决定切换哪个其他元素（根据可见性执行hide / show）。

如何制作动态名称选择器（无限）

2 个答案: