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

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

...但我不确定这是否比上面的第一个解决方案更能让你受益。:-)

Answer 2

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

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

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