jQuery/Javascript 添加/删除它.class点击

Question

<script>
$(".image-popup").on('click', function() {
$(this).find(".myModal").addClass("modal-active");
$(".modal-active").css("display", "block");
});
$(".close").on('click', function() {
$(".modal-active").css("display", "none");
var myVar = $(this).closest(".image-popup");
myVar.find(".myModal").removeClass("modal-active");
$(".modal-active").css("display","none");
});
</script>

我试图让模态出现，然后在单击关闭按钮时消失。问题是 removeClass(( 将不起作用，并且"display"、"none"不会覆盖第一次单击功能。有什么帮助吗？

Answer 1

我从您的问题和上面的评论中猜测的是，来自第二个处理程序的事件正在冒泡到您的第一个处理程序：

$(".image-popup").on('click', function() {
$(this).find(".myModal")
.addClass("modal-active")
.show();
});
$(".close").on('click', function(evt) {
evt.preventDefault();
$(this).closest(".image-popup")
.find(".myModal")
.removeClass("modal-active");
.hide();
});

尝试使用evt.preventDefault();防止事件从.close处理程序冒泡

Answer 2

您可以使用以下简单解决方案修复它：

.HTML

<div class="image-popup">
<div class="show-modal btn btn-success">Show Modal</div>
<div class="myModal">
<div class="close btn btn-success">Close</div>
<p>My Modal is active</p>
</div>
</div>

.CSS

.modal-active .myModal{
display: block;
}
.myModal{
display:none;
}
.close{
color:red;
display:block;
}

.JS

$(function(){
$('.show-modal').click(function(){
$(this).parent().addClass('modal-active');
});
$('.close').click(function(){
$(this).closest('.image-popup').removeClass('modal-active');
});
});

有关更多详细信息，请参阅此小提琴 https://jsfiddle.net/a3yze54w/1/