1

私はこれらのような20の「グループ」を持つつもりです：

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

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

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

各グループをコピーして2つの単語を変更する代わりに、チェックボックスで同等のグラフィックを切り替えることで、コードを大幅に短縮するにはどうすればよいでしょうか。

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

2 に答える 2

3

それらに共通のクラス（必須ではありませんが、便利です-以下では「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();
});

...しかし、それが上記の最初の解決策よりもはるかにあなたを買うかどうかはわかりません。:-)

于 2013-01-10T17:31:55.743 に答える
1

属性class付きのaを使用して、どの要素を指定するかを指定できます。これを試して：datatoggle()

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

$('.checkbox-fruit').click(function() {
    $($(this).data('related-graphic')).toggle();
});
于 2013-01-10T17:33:31.980 に答える