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

How to make dynamic name selectors (infinitely)

本文关键字：无限 选择器 何制作 动态      更新时间：2023-09-26

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

如果您

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

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

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

由于一些尼比特**es：-）抱怨这个答案的完整性，你的完整代码现在看起来像这样：

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

演示：http://jsfiddle.net/9vj3wagt/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）。

相关文章：