Я пытаюсь создать небольшой веб-сайт, на котором отображаются сбои. Вот пример 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');
Прошу прощения, если это немного запутанно. Заранее спасибо за вашу помощь!
Пытаться
$('#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(){
!$('#computerA2').hasClass('failure') ? $('#computerB2').toggleClass('green failure') : '';
});
Убедитесь, что компьютер A не имеет класса сбоя, а если нет, выполните команду toggle, иначе ничего не сделайте.
Возможно, просто добавьте эту строку в обработчики кликов для других элементов:
$('#computerB').click(function(){
validateComputerA($('#computerB2'))
и добавьте функцию для обработки всего этого, а затем просто вызовите его и передайте на свой компьютер.
function validateComputerA($comp){
if(!$('#computerA2').hasClass('failure')){
$comp.toggleClass('green failure');
}
}