javascript - ボタンのクリックで画像を非表示および表示

Question

divに2つの画像と2つのボタンがあります。ボタン1をクリックすると、ボタン2と同じように画像1が表示されます..今、私の問題は、体の任意の部分をクリックすると両方の画像を非表示にすることです..今私の問題は、ボディをクリックすると非表示になりますが、ボタンのクリックで画像を表示できないことです。

フィドルHere

HTML

<input type='button' id='btn1' value='button1'>
    <img src="abc.jpg" id='img1'>
        <input type='button' value='button2' id='btn2'>
    <img src="abc.jpg" id='img2' >

JS

$('#btn1').click()(function(){
       $('#img1').show();
                       $('#img2').hide();   
                  });
$('#btn2').click()(function(){
       $('#img2').show();
                       $('#img1').hide();   
                  });

$('body').click()(function(){
 $('#img1').hide();   
     $('#img1').hide();   
});

Answer 1

試す：

$('#btn1').click(function (e) {
    e.stopPropagation();
    $('#img1').show();
    $('#img2').hide();
});
$('#btn2').click(function (e) {
    e.stopPropagation();
    $('#img2').show();
    $('#img1').hide();
});
$('body').click(function () {
    $('#img1,#img2').hide();
});

jsFiddle の例

クリック機能を誤って使用していました。さらに、ボタンのクリック イベントも、ボディに配置したイベントに DOM をバブリングしていました。

Answer 2

これを試して

 $('body').click(function(e) {
        var target = $(e.target);
        if(!target.is('#btn1') || !target.is('#btn2')) {
           $('#img1').hide();   
         $('#img1').hide();
        }
    });