Question

考虑以下HTML代码来应用Jquery：

HTML code：

<div id="outer_div">
  <div id="inner_div_1"></div>
  <div id="inner_div_2"></div>
  <div id="inner_div_3"></div>
</div>

默认情况下，＆＃34; outer_div＆＃34;是隐藏的。使用Jquery show（）函数单击按钮时出现。我想要执行以下操作：点击＆＃34; outer_div＆＃34;排除＆＃34; inner_div_1＆＃34;内的区域，＆＃34; outer_div＆＃34;将再次被隐藏。尝试以下代码时失败了。我应该修改什么？

尝试Jquery 1：

$("#outer_div:not(#inner_div_1)").on("click",function(){
    $("#outer_div").hide("slow");
});

尝试Jquery 2：

$("#outer_div").not("#inner_div_1").on("click",function(){
    $("#outer_div").hide("slow");
});

非常感谢您的支持。

Answer 1

您需要考虑内部div中的单击也是对outter div的单击。话虽这么说，你只需要检查目标和目标父母：

$("#outer_div").on("click",function(e){
    if(!$(e.target).closest('#inner_div_1').length) $("#outer_div").hide("slow");
});

Answer 2

您可以使用事件中的一些数据

$("#outer_div").on("click",function(e){
    if( // Fast check to see if this is the div
        e.target.id !=='inner_div_1'
        // We limit the 'closest()' code to the outer div. This adds children to the exclude
        && $(this).closest('#inner_div_1, #outer_div')[0].id=='outer_div'){
        alert('good click');
    }
});

这是现在代码的解决方案，当没有太多排除对象时，这种方法非常有效。但没有通配符选择器，这很好。
还有jsFiddle demo。

其他属性可以像类一样使用：

$("#outer_div").on("click",function(e){
    if( e.target.className!=='even' 
        && $(this).closest('.even, #outer_div')[0].id=='outer_div'){
        alert('yay, clicked an odd');
    }
});

I made 7 lines, gave the even ones a class 'even'

Jquery事件 - 如何选择除一些内部区域之外的整个DIV

2 个答案: