在按钮单击上隐藏并显示图像

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例子

您错误地使用了单击功能，而且按钮上的单击事件也将DOM冒泡到您放置在主体上的事件。

Answer 2

尝试这个

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