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

【问题标题】：How to make dynamic name selectors (infinitely)如何制作动态名称选择器（无限）
【发布时间】：2015-01-19 17:13:13
【问题描述】：

我不熟悉 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

【问题讨论】：

如果你能给我们一个很棒的 html...
最好有一个应用到所有元素的类，然后将data- 属性添加到 HTML 并使用它来匹配处理程序内部...跨度>
我更新了你的标题和问题以更接近How to Ask。如果您不喜欢，请随时回滚。
好的，我现在会更加小心...
jsfiddle.net/TrueBlueAussie/9vj3wagt/1 添加在下面以使用您的 HTML 进行演示。

标签： javascript jquery

【解决方案1】：

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

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

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

由于一些 nitbit**es :-) 抱怨此答案的完整性，您的完整代码现在看起来像这样：

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

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

【讨论】：

两个赞成票？你有粉丝俱乐部什么的？这只回答了问题的一小部分:)
大声笑，感谢您花时间回答我。您的解决方案也有效。
@TrueBlueAussie 在回答查询过程后我更喜欢，但我完成了答案。它对原始 HTML 代码的影响也为零。
原来的例子不是一个很好的例子来说明如何做这些事情，但感谢您抽出宝贵时间完成您的回答:)

【解决方案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 基于可见性）。

【讨论】：

谢谢，但显然不像jAndy 那样受欢迎！ :)
必须是衬衫：-P