Question

我的代码中存在bug并发症。我一直在研究几个小时来寻求解决方案。这就是我想要实现的目标：

我有一个包含6个复选框的页面。每个复选框周围都有一个包裹div .control-case。如果选中了5个复选框，则其余复选框的.control-case将添加一个类.unselected。

现在，如果单击此包装器.control-case .unselected，那么我有一个通知范围，我想用jQuery颜色进行动画处理。

好消息：点击它时会有所作为。

坏消息：它有时会偶尔触发没有类的div而且它也可能重复颜色更改（我假设由于队列备份）。如何仅在单击时才允许在正确的div上触发一次？

P.S。我也尝试了.hasClass方法。没有成功。

这是我的代码： http://pastebin.com/8XR7iHp2

感谢您的支持！：）

Answer 1

每次运行此代码时，

$('#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/

查看演示

jQuery：如果单击复选框动画div

1 个答案: