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 example

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

Answer 2

试试这个

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

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

2 个答案: