0

エラーを表示する小さな Web サイトを構築しようとしています。例として jsfiddle を次に示します: http://jsfiddle.net/hnQN7/2/

チェックボックスをクリックすると、そのコンピュータに障害があることを示します。この例では、コンピューター A が原因で B、C、および D が失敗しますが、残りのコンピューターは単独で失敗するだけです。現在、クラスを切り替えて失敗を表示しています。残念ながら、この方法にはいくつかの問題があります。特に、チェックボックス A をクリックすると、B、C、D が失敗したことが表示されます。しかし、チェックボックス A がチェックされている間にチェックボックス B をクリックすると、B が緑色に戻ります。これは正しくありません。コンピューター A で障害が発生すると、チェックされているかどうかに関係なく、B が赤色のままになるはずです。同時に、A がチェックされていない場合、B はチェックされていない場合にのみ緑に戻る必要があります。

これを達成するための最良の方法は何ですか？

これが私が現在持っているスクリプトです：

$('#computerA').click(function(){
    $('#computerA2').toggleClass('green failure');
    $('#computerB2').toggleClass('green failure');
    $('#computerC2').toggleClass('green failure');
    $('#computerD2').toggleClass('green failure');
})

$('#computerB').click(function(){
    $('#computerB2').toggleClass('green failure');

})

$('#computerC').click(function(){
    $('#computerC2').toggleClass('green failure');

})

$('#computerD').click(function(){
    $('#computerD2').toggleClass('green failure');

これが少し紛らわしい場合は申し訳ありません。よろしくお願いします。

4

3 に答える 3

2

試す

$('#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);
})

デモ:フィドル

于 2013-09-18T15:55:53.830 に答える
0

たぶん、他のアイテムのクリック ハンドラーに次の行を追加するだけです。

          $('#computerB').click(function(){
              validateComputerA($('#computerB2'))

それをすべて処理する関数を追加してから、それを呼び出して特定のコンピューターに渡します。

   function validateComputerA($comp){
      if(!$('#computerA2').hasClass('failure')){
         $comp.toggleClass('green failure');
       }
   }
于 2013-09-18T16:03:32.710 に答える