-1

最近、クラスの切り替えに関して別の質問をしました。最初は解決策があると思っていましたが、まだ問題が残っているようです。いくつかのアイテムの失敗と成功を示す小さなサイトを構築しようとしています。これが私が構築しようとしているものの例です: http://jsfiddle.net/zrYLh/4/

サイトの動作: コンピューター A のボックスをオンにすると、コンピューター A、B、C、および D が赤くなります。次に、コンピューター B のボックスをオンにしても、何も変わらないはずです。次に、コンピューター B のチェックボックスをオフにすると、コンピューター A がまだオンになっていて、A、B、C、および D が単独で赤になるため、すべての項目は赤のままです。チェックの任意の組み合わせに対して同じロジックが適用されます。


現在、コードは、別のアイテムが赤のままにする必要がある場合でも、特定のアイテムを強制的に緑に戻します。たとえば、A と B がチェックされ、B がチェックされていない場合、A と C は強制的に緑色になります。

これが今の私のスクリプトです:

$('#computerA').click(function(){
    var state = this.checked;
    $('#computerA2, #computerB2, #computerC2, #computerD2').toggleClass('green', !state).toggleClass('failure', state);
})

$('#computerB, #computerC, #computerD').click(function(){
    var state = this.checked || $('#computerA').is(':checked');
    $(this).prev().toggleClass('green', !state).toggleClass('failure', state);
})

$('#computerB').click(function(){
    var state = this.checked;
    $('#computerA2, #computerC2').toggleClass('green', !state).toggleClass('failure', state);
})

$('#computerA, #computerC').click(function(){
    var state = this.checked || $('#computerB').is(':checked');
    $(this).prev().toggleClass('green', !state).toggleClass('failure', state);
})

どんな助けでも大歓迎です-ありがとう!

4

2 に答える 2