用jQuery隐藏父div

Question

我遇到了jQuery的问题。我有这个：

我希望当你点击页面的黑色部分时，黑色部分和图像消失。这是我的代码：

HTML

<div id="fade-wrapper">
    <div class="row-1-big"><img src="css/images/galeria/1.jpg"></div>
    <div class="row-2-big"><img src="css/images/galeria/2.jpg"></div>
    <div class="row-3-big"><img src="css/images/galeria/3.jpg"></div>
    <div class="row-4-big"><img src="css/images/galeria/4.jpg"></div>
    <div class="row-5-big"><img src="css/images/galeria/5.jpg"></div>
    <div class="row-6-big"><img src="css/images/galeria/6.jpg"></div>
    <div class="row-7-big"><img src="css/images/galeria/7.jpg"></div>
    <div class="row-8-big"><img src="css/images/galeria/8.jpg"></div>
    <div class="row-9-big"><img src="css/images/galeria/9.jpg"></div>
</div>

JS

var r1 = $('.row-1'); //this is for when you click the thumbnail

r1.click(function(){
   $('#fade-wrapper').show(300);
   $('.row-1-big').delay(400).show();
});

问题是，如果我添加此代码：

$('#fade-wrapper').click(function(){
   $('this').hide();
});

当我点击图像（第1行 - 第1行）时，它隐藏了所有内容，当我点击黑色部分时，我不想隐藏内容。如果您不明白，请告诉我。

Answer 1

尝试在此处使用 e.stopPropagation() ，以防止在您点击子图片时点击父div上的点击事件：

$('#fade-wrapper').click(function(){
   $(this).hide();
});

$('#fade-wrapper img').click(function(e){
   e.stopPropagation();
});

另请注意，您不需要在引号内包含this，因为this是一个对象而非字符串。

Answer 2

要获得你要做的父母 -

$('#fade-wrapper').click(function(){
    $(this).parent().hide(); 
});

Answer 3

如果你想在黑色区域的Div包装外面点击然后关闭整个东西，这里是如何：

//Click on html 
$('html').click(function(){
  //hide
  $('#fade-wrapper').hide();
});

// prevent the fadeIn area to hide when clicked
$('#fade-wrapper').click(function(e){
   e.stopPropagation();
})

Answer 4

如果您检查实际点击的div，它应该可以工作：

$('#fade-wrapper').click(function(e){
    if (e.target.id === 'fade-wrapper')
        $(this).hide();
});