1

コードにバグの合併症があります。私は解決策を求めて数時間研究してきました。これが私が達成しようとしていることです：

6つのチェックボックスがあるページがあります。.control-case各チェックボックスを囲むdiv があります。5 つのチェックボックスがオンになっている場合、残りのチェックボックス.control-caseにはクラスが追加され.unselectedます。

今、このラッパー.control-case .unselectedがクリックされると、jQuery カラーでアニメーション化する通知範囲が表示されます。

朗報:クリックすると多少は機能します。

悪いニュース:ときどきクラスなしで div をトリガーし、色の変更を繰り返すこともあります (キューのバックアップが原因だと思います)。クリックされたときにのみ正しいdivで1回だけトリガーされるようにするにはどうすればよいですか?

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 に答える