1

我的代码中有错误并发症。我已经研究了几个小时来寻找解决方案。这是我想要实现的目标：

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

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

好消息：当它被点击时它有些工作。

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

PS我也试过这个.hasClass方法。没有成功。

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

感谢大家的支持！:)

4

1 回答 1

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/查看演示

于 2012-08-02T19:52:35.033 回答