jquery - jquery トグル 非表示 表示 質問

Question

これを短縮する最も効率的な方法は何ですか?

$('.img').click(function(e) {
    if ($(this).attr('id') == 'myid') {
        $('#a').hide();
        $('#b').show();
    } else {
        $('#a').show();
        $('#b').hide();
    }
});

別のオプションがelse if

Answer 1

$('#myid').click(function() {
        $('#a,#b').toggle();
});

Answer 2

すべての要素を「img」というクラスと一致させようとしていると仮定します。

$(".img[id='myid']").click(function() {
        $('#a,#b').toggle();
});

複数の ID を許可するには

$(".img[id='myid'], .img[id='myid2']").click(function() {
        $('#a,#b').toggle();
});

ID が等しくないことを確認することもできます

$(".img[id!='someid']").click(function() {
        $('#a,#b').toggle();
});

Answer 3

クリック イベント内の要素 ID を確認するのはなぜですか? この特定の要素だけでこのイベントを処理する場合は、それを選択してイベント ハンドラーをバインドします。

常に #a または #b のいずれかが表示されていると仮定します。

$('#myid').click(function(){
    $('#a').toggle();
    $('#b').toggle();
})