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

Question

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

0

Я пытаюсь создать небольшой веб-сайт, на котором отображаются сбои. Вот пример 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');

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

user2155400 18 сен. 2013, в 18:40

Источник

Теги:

jquery

html

css

checkbox

3 ответа

0

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

Убедитесь, что компьютер A не имеет класса сбоя, а если нет, выполните команду toggle, иначе ничего не сделайте.

Chad 18 сен. 2013, в 14:25

0

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

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

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

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

james emanon 18 сен. 2013, в 14:08

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-09-18T13-06-00.000Z

Пытаться

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

Демо: скрипка

Это работало хорошо, но теперь я столкнулся с дополнительной проблемой. Я обновил скрипку здесь: jsfiddle.net/zrYLh/3 . Когда я нажимаю на A и B, затем убираю флажок B, он показывает, что A и C зеленые - когда C все еще должен быть ошибкой. Если у вас есть предложения по устранению этой проблемы, это было бы здорово - спасибо!
@ user2155400 - почему вы добавили больше кода в созданную Аруном скрипку? У него нет проблемы, на которую вы указываете.
Я хотел иметь возможность сделать то же самое, что он сделал, и применить его к дополнительным комбинациям проверок.
@ user2155400 - но упомянутое вами дело прекрасно работает с его ответом.