我遇到的问题是,如果我在单击删除按钮后立即单击结帐按钮,即使我已经有了 $(".blueClass").removeClass(' classOne');
在 jquery 函数上。我想要完成的是,当我单击“删除”时,当我单击“结帐”时,该框不应更改其颜色,除非再次单击该框。完整的源代码位于下面的链接中。
$( document ).ready(function() {
$(".boxes" ).click(function() {
$(this).addClass('classOne');
});
$(".btn-primary").click(function(){
$(".classOne").addClass('blueClass');
$(".classOne").append("<div class='wraps'><br><strong>Ordered</strong>");
$(".classOne").append("<br><button type='button' class='btn btn-info'>Remove</button></div>");
$(".blueClass").removeClass('classOne');
$(".btn-info").click(function(){
$(this).parent().removeClass('blueClass classOne').empty('');
});
});
});
.leftbox{
min-height: 100%;
}
.rightbox{
min-height: 100%;
}
.boxes{
border: 1px solid black;
border-radius: 10px;
min-height: 9em;
float: left;
margin: 1em 1em 1em 1em;
width: 100%;
}
.wrapper{
padding-top: 1em;
}
.btn-holder{
margin-top: 3em;
}
.redClass{
background-color: red;
}
.greenClass{
background-color: green;
}
.yellowClass{
background-color: yellow;
}
.blueClass{
background-color: blue;
}
.rightbox input{
width:50%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" col-md-3 text-center">
Item 11
<div class="boxes text-center">
</div>
</div>
<div class=" col-md-3 text-center">
Item 12
<div class="boxes text-center">
</div>
</div>
</div>
<button type="button" class="btn btn-primary">Checkout</button>
最佳答案
当点击.btn-info
时,事件冒泡
到.boxes
元素,然后触发监听器添加再次.classOne
:
$(".boxes" ).click(function() {
$(this).addClass('classOne');
})
您想停止冒泡,只需在 .btn-info
点击监听器中添加 event.stopPropagation 即可:
$(".btn-info").click(function(e){
e.stopPropagation();
$(this).parent()
.removeClass('blueClass classOne')
.empty('');
});
顺便说一句,将监听器添加到 .btn-primary
点击回调之外的文档(如 @Ankit Agarwal 状态)是一种更好的设计,因为您一次只会添加一个监听器,而不是每次添加单击结帐按钮的时间。
编辑
<小时/>我认为更合适的解决方案是,如果您不想停止事件传播,这可能会给您带来麻烦,例如您想监听整个文档的一些“常规点击”,您可以检查 event.target在 .boxes
回调中,并删除 .btn-info
回调中的 event.stopPropagation
部分:
$(".boxes").click(function(e) {
if(event.target === this)
$(this).addClass('classOne');
});
$(".btn-info").click(function(){
$(this).parent()
.removeClass('blueClass classOne')
.empty('');
});
关于javascript - 删除jquery函数中的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51762648/