Правильно переключается класс

Question

Я пытаюсь создать небольшой веб-сайт, на котором отображаются сбои. Вот пример jsfiddle: http://jsfiddle.net/hnQN7/2/

Когда вы нажмете галочку, это указывает на сбой с этого компьютера. В этом примере компьютер A приводит к сбою B, C и D, в то время как остальные компьютеры не работают самостоятельно. В настоящее время я переключаю классы, чтобы показать сбои. К сожалению, этот метод имеет некоторые проблемы. В частности, когда я нажимаю флажок А, он показывает, что B, C и D потерпели неудачу. Но если я нажму на флажок «В», а флажок «А» отмечен, он переключит 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'); 

Прошу прощения, если это немного сбивает с толку. Заранее спасибо за вашу помощь!

Answer 1

Попробуйте

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

Demo: Fiddle

Answer 2

$('#computerB').click(function(){ 
    !$('#computerA2').hasClass('failure') ? $('#computerB2').toggleClass('green failure') : ''; 
}); 

Проверьте, чтобы увидеть, если компьютер А не имеет терпеть неудачу класс, и если нет, то выполнить пуговицу, иначе ничего не делать.

Answer 3

Может быть, просто добавьте эту строку в обработчиках клик для других элементов:

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

и добавить функцию, чтобы обрабатывать все это, а затем просто назвать его и передать в вашем конкретном компьютере.

function validateComputerA($comp){ 
     if(!$('#computerA2').hasClass('failure')){ 
     $comp.toggleClass('green failure'); 
     } 
    }