使用 jQuery 将选择器归为一类答案

【问题标题】：Grouping selectors into one category with jQuery使用 jQuery 将选择器归为一类
【发布时间】：2013-01-10 17:29:38
【问题描述】：

我将有 20 个这样的“组”：

$("#checkbox-apple").click(function(){
    $("#graphic-apple").toggle();
}) 

$("#checkbox-orange").click(function(){
    $("#graphic-orange").toggle();
}) 

$("#checkbox-pineapple").click(function(){
    $("#graphic-pineapple").toggle();
})

除了复制每个组并更改两个单词之外，我如何通过让任何复选框切换其等效图形（类似于此代码的行）来大大缩短我的代码？：

$("#checkbox" FRUIT).click(function(){
    $("#graphic" FRUIT).toggle();
})

【问题讨论】：

你可以为它们分配一个特定的css类，然后得到子字符串

标签： jquery grouping css-selectors simplify

【解决方案1】：

给他们一个通用的类（不是必要的，而是有用的——下面我用的是“fruit”），然后就是一个简单的字符串操作：

$(".fruit").click(function() {
    $("#graphic-" + this.id.replace("checkbox-", "")).toggle();
});

（或者他们可能已经有其他一些您可以使用的通用功能。）

或者如果你不添加类：

$("#checkbox-apple, #checkbox-orange, #checkbox-pineapple").click(function() {
    $("#graphic-" + this.id.replace("checkbox-", "")).toggle();
});

您甚至可以去掉 id 值并改用 data-fruit：

<input type="checkbox" data-fruit="pineapple" class="fruit">

...然后：

$(".fruit").click(function() {
    $("#graphic-" + $(this).attr("data-fruit")).toggle();
});

...但我不确定这是否比上面的第一个解决方案更适合您。 :-)

【讨论】：

哇 - 非常感谢您的快速回复。我选择了第一个选项，效果很好。再次感谢！
@Chris：不用担心，很高兴有帮助！

【解决方案2】：

您可以使用带有data 属性的class 来指定要toggle() 的元素。试试这个：

<input type="checkbox" id="checkbox-orange" class="checkbox-fruit" data-related-graphic="#graphic-orange" />

$('.checkbox-fruit').click(function() {
    $($(this).data('related-graphic')).toggle();
});

【讨论】：

感谢 Rory 提供的替代解决方案。 +1