灯箱出现问题，点击事件不起作用

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

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

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