时间戳

首页 > 解决方案 > 删除jQuery函数中的类

javascript - 删除jQuery函数中的类

问题描述

我遇到的问题是，如果我在单击删除按钮后立即单击结帐按钮，即使我已经拥有$(".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>

标签： javascriptjquery

解决方案

当单击 a 时.btn-info，将事件bubbles传递给.boxes元素，然后再次触发侦听器添加.classOne：

$(".boxes" ).click(function() {
    $(this).addClass('classOne');
})

你想停止这种冒泡，只需在点击监听器中添加event.stopPropagation ：.btn-info

$(".btn-info").click(function(e){
    e.stopPropagation();
    $(this).parent()
        .removeClass('blueClass classOne')
        .empty('');
});

而且，顺便说一下，像@Ankit Agarwal.btn-primary所述，将侦听器添加到单击回调之外的文档是一种更好的设计，因为您一次只会添加一个侦听器，而不是每次单击结帐按钮时。

编辑

我认为一个更合适的解决方案，如果你不想停止你的事件传播，这可能会给你带来麻烦，例如你想在整个文档上监听一些“一般点击”，你可以检查event.target.boxes回调，并删除回调中的event.stopPropagation部分.btn-info：

$(".boxes").click(function(e) {
  if(event.target === this)
      $(this).addClass('classOne');
});

$(".btn-info").click(function(){
    $(this).parent()
        .removeClass('blueClass classOne')
        .empty('');
});

推荐阅读