lightbox出现问题，单击事件不起作用

Question

我和jQuery有个愚蠢的问题..我正在试着做一个简单的灯箱，但是我的“关闭”按钮有问题。这就是我所拥有的-一个带有一些颜色变化的网格。我们有一个图像和一个颜色的文本。当我们点击它时，我们应该会在一个大小更大的灯箱中看到图像。为此，我只是添加和删除了一个类。奇怪的是，点击关闭按钮是有效的，显示了控制台日志，但没有删除类。为什么会这样呢？我在这里做错了什么？close按钮上的函数不应该从所有元素中删除类吗？

​

var colorVariation = $('.product-variations__color');
var colorPopUp = $('.product-variations__color-popup');

colorVariation.on('click', function () {
  $(this).find(colorPopUp).addClass('is-active');
});

$('.close').on('click', function() {
    colorPopUp.removeClass('is-active');
  console.log('woohoo');
});

.product-variations {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.product-variations__color {
  max-width: calc((100% / 4) - 20px);
  padding: 0 10px 50px;
}

.product-variations__color-name {
  width: 100%;
  text-align: center;
}

.product-variations__color-popup {
  display: none;
}

.product-variations__color-popup.is-active {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.product-variations__color-popup.is-active .close {
  filter: difference;
  position: absolute;
  top: 20px;
  left: 20px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-variations">
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/ff0000" />
    
    <div class="product-variations__color-name">
      Red
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/ff0000" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/008000" />
    
    <div class="product-variations__color-name">
      Green
    </div>
    
      <div class="product-variations__color-popup">
    <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/008000" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/0000ff" />
    
    <div class="product-variations__color-name">
      Blue
    </div>
    
      <div class="product-variations__color-popup">
    <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/0000ff" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/800080" />
    
    <div class="product-variations__color-name">
      Purple
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/800080" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/FFFF00" />
    
    <div class="product-variations__color-name">
      Yellow
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/FFFF00" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/00FFFF" />
    
    <div class="product-variations__color-name">
      Cyan
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/00FFFF" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/BFFF00" />
    
    <div class="product-variations__color-name">
      Lime
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/BFFF00" />
    </div>
  </div>
  
  <div class="product-variations__color">
    <img src="https://via.placeholder.com/150x150/000000" />
    
    <div class="product-variations__color-name">
      Black
    </div>
    
    <div class="product-variations__color-popup">
      <div class="close">&times;</div>
      
      <img src="https://via.placeholder.com/1500x1500/000000" />
    </div>
  </div>
</div>

​

Answer 1

问题是您正在触发另一个单击调用，该调用会将类添加回元素上，因为事件侦听器位于父级上。因此，子代被触发，父代紧随其后。如果停止单击，则不会在父级上触发。

$('.close').on('click', function(event) {
    event.stopPropagation();
    colorPopUp.removeClass('is-active');
});