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属性来指定toggle()的哪个元素。试试这个：

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

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

使用jQuery将选择器分组到一个类别中

2 个答案: