我的代码中存在错误复杂性。我已经研究了几个小时来寻找解决方案。这是我想要实现的目标:
我有一个包含 6 个复选框的页面。每个复选框周围都有一个包裹 div .control-case 。如果选中了 5 个复选框，则剩余复选框的 .control-case 将添加一个类 .unselected。
现在，如果单击此包装器 .control-case .unselected，那么我有一个通知范围，我希望使用 jQuery 颜色进行动画处理。
好消息:点击后它会有点作用。
坏消息:它有时会时不时地触发没有类的 div，并且它也可能会重复颜色更改(我假设是由于队列备份)。如何仅在单击时才允许在正确的 div 上触发一次？
附注我还尝试了 .hasClass 方法。没有成功。
这是我的代码: http://pastebin.com/8XR7iHp2
感谢大家的支持! :)
最佳答案
每次运行此代码时，
$('#type-controls .control-case.unselected').click(function() {
新的点击处理程序实际上已添加到您的代码中。因此，导致重复射击。我用另一种方法重写了你的代码。看看是否满足您的要求。
$(document).ready(function() {
$('input:checkbox#foam-control, input:checkbox#reversecurve-control, input:checkbox#ultra-control, input:checkbox#pro-control, input:checkbox#icebreaker-control').attr('checked', true);
$("#type-controls input[type=checkbox]").click(function() {
var countchecked = $("#type-controls input[type=checkbox]:checked").length;
if (countchecked >= 5) {
$('#type-controls input[type=checkbox]').not(':checked').attr("disabled", true);
}
else {
$('#type-controls input[type=checkbox]').not(':checked').attr("disabled", false);
}
});
$("#type-controls label").click(function() {
var countchecked = $("#type-controls input[type=checkbox]:checked").length;
if (countchecked >= 5 && $(this).parent().hasClass('unselected')) {
alert("Do notice");
$('.max-notice').animate({
'backgroundColor': '#c30c08',
'color': '#fff'
}, 400).delay(3000).animate({
'backgroundColor': '#fff',
'color': '#777'
}, 300);
}
});
});
您可以在 http://jsfiddle.net/w7djF/1/ 观看演示
关于javascript - jQuery:如果单击复选框，则为 div 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11783624/