javascript - 单击按钮时隐藏和显示图像

Question

我在一个 div 中有两个图像和两个按钮，现在的过程是当我单击按钮 1 时，图像 1 显示与按钮 2 中的相同。现在我的问题是当我单击身体的任何部分时，我希望两个图像都隐藏。现在我的问题是当我点击身体时它会隐藏但无法在按钮点击时显示图像。

小提琴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 示例

您错误地使用了 click 函数，而且您在按钮上的点击事件也将 DOM 冒泡到您放置在 body 上的事件。

Answer 2

尝试这个

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