因此,我正在尝试创建循环显示某些颜色的 block 。每种颜色都由一个类别定义,我删除了某个类别的颜色,然后在单击某个 block 时添加另一个类别的颜色。每段代码如下所示:
//Function 1
$('.blue').click(function(){
console.log("Blue has been clicked");
$(this).addClass('green');
$(this).removeClass('blue');
});
//Function 2
$('.green').click(function(){
console.log("Green has been clicked");
$(this).addClass('yellow');
$(this).removeClass('green');
});
当第一次点击方 block 时,颜色会改变。但是当我再次点击它时,颜色并没有改变。
我添加了 console.log
语句来监控控制台中发生的事情。例如,当我单击具有 blue
类的框时,它会添加 green
类,并删除 blue
类。但是当我单击同一个框(现在是绿色的)时,我希望第二个函数运行,并且该框会变成黄色。但是,我通过控制台看到的是第一个函数正在尝试再次运行。
我检查了 HTML,类确实发生了变化。
我的问题是,当第一个框不再是 blue
类的成员时,为什么会触发函数 1?它不应该调用函数 2,因为它现在是 green
类的成员吗?
CodePen 是 here ,我正在积极努力。我会在 CodePen 工作时在这里提及。
**CodePen 现在可以使用了,我使用了 $(document).on('click', '.green')
而不是 $('.green').click()
**
谢谢!
最佳答案
由于您希望根据已更改的选择器更改事件处理程序,因此您需要使用事件委托(delegate)。
//Function 1
$(document).on('click', '.blue', function () {
console.log("Blue has been clicked");
$(this).addClass('green');
$(this).removeClass('blue');
});
//Function 2
$(document).on('click', '.green', function () {
console.log("Green has been clicked");
$(this).addClass('yellow');
$(this).removeClass('green');
});
在您的事件注册中,选择器仅在页面加载时计算一次,此后对类所做的任何更改都不会影响已注册的处理程序。
代码片段示例
$(document).on('click', '.blue', function () {
console.log("Blue has been clicked");
$(this).addClass('green');
$(this).removeClass('blue');
});
//Function 2
$(document).on('click', '.green', function () {
console.log("Green has been clicked");
$(this).addClass('yellow');
$(this).removeClass('green');
});
$(document).on('click', '.yellow', function () {
console.log("Yellow has been clicked");
$(this).addClass('blue');
$(this).removeClass('yellow');
});
$(document).on('click', '.red', function () {
console.log("Red has been clicked");
$(this).addClass('blue');
$(this).removeClass('red');
});
.block{
display: inline-block;
width: 200px;
height: 100px;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.red{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='block green'></div>
<div class='block blue'></div>
<div class='block yellow'></div>
<div class='block red'></div>
关于javascript - JQuery 不删除类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29238352/