jquery - 使用 jQuery 将选择器分组为一类

Question

我将有 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();
})

Answer 1

给他们一个公共(public)类(不是必需，但很有用——下面我使用“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();
});

...但我不确定这比上面的第一个解决方案能给您带来更多好处。 :-)