分组选择归为一类与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").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属性来指定将哪个元素指定为toggle()。试试这个：

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

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