如何使 jQuery 隐藏自定义灯箱

Question

我使用以下 HTML 创建了一个自定义灯箱：

<a href="#" class="lightbox">
    <img src="thumbnail.jpg" />
    <div class="box">
        <img class="boximage" src="full-image.jpg" />
        <p>Caption</p>
        <div class="close"><p>x</p></div>
    </div>
</a>

单击带有 .lightbox class 的个人缩略图时，以下 JavaScript 打开正确的个人完整 .boximage class 图像。

$('.lightbox').click(function(){
    $(this).find('.box, .boximage').css('display', 'block');
});

以前我有一些 JavaScript 可以在您单击关闭 x 时关闭灯箱。

$('.close').click(function(){
    $('.box, .boximage').css('display', 'none');
});

但我似乎无法使用关闭灯箱。

如何使用关闭功能？

Answer 1

使用 stopPropagation 可以防止事件在 DOM 树中冒泡，从而防止任何父处理程序收到事件通知。

$('.close').click(function(e){
   e.stopPropagation();
   $('.box, .boximage').css('display', 'none');
});

当您在灯箱中绑定点击事件时，点击关闭按钮也适用于要点击的灯箱。所以，你需要防止冒泡树。

Answer 2

@BhojendraNepal 已经正确指出关键是使用 event.stopPropagation()。除此之外，如果你需要在一个页面上有多个这样的元素，你希望保持点击的 context 如下：

$('.close').click(function(e){
    e.stopPropagation();
    $(this).closest('.box').css('display', 'none');
});

$('.lightbox').click(function(){
    $(this).find('.box, .boximage').css('display', 'block');
}); 
$('.close').click(function(e){
    e.stopPropagation();
    $(this).closest('.box').css('display', 'none');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1. <a href="#" class="lightbox">
  <img src="thumbnail.jpg">
  <div class="box">
    <img class="boximage" src="full-image.jpg"/>
    <p>Caption</p>
    <div class="close">
      <p>x</p>
    </div>
  </div>
</a>
<br>2. 
<a href="#" class="lightbox">
  <img src="thumbnail.jpg">
  <div class="box">
    <img class="boximage" src="full-image.jpg"/>
    <p>Caption 2</p>
    <div class="close">
      <p>x</p>
    </div>
  </div>
</a>
<br>3. 
<a href="#" class="lightbox">
  <img src="thumbnail.jpg">
  <div class="box">
    <img class="boximage" src="full-image.jpg"/>
    <p>Caption 3</p>
    <div class="close">
      <p>x</p>
    </div>
  </div>
</a>

如何使 jQuery 隐藏自定义灯箱

How to make jQuery hide custom lightbox

jquery

class

lightbox