javascript - 灯箱问题，点击事件不起作用

Question

我有一个关于 jQuery 的愚蠢问题。我们有一个图像和一个颜色的文本。当我们点击它时，我们应该在更大的灯箱中看到图像。为此，我只是添加和删除了一个类。
奇怪的是，点击关闭工作，控制台日志显示，但类没有删除..这是为什么？我在这里做错了什么？关闭按钮上的功能不应该从所有元素中删除类吗？

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

问题是您正在触发另一个单击调用，该调用将类添加回元素，因为事件监听器位于父级上。所以 child 被触发，然后是 parent 。如果您停止单击，则不会在父级上触发。

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