Question

我正在尝试构建一个显示失败的小型网站。这是一个jsfiddle作为例子：http://jsfiddle.net/hnQN7/2/

单击复选框时，表示该计算机出现故障。在此示例中，计算机A导致B，C和D失败 - 而其余计算机仅自行失败。目前，我正在切换课程以显示失败。不幸的是，这种方法存在一些问题。特别是，当我单击复选框A时，它显示B，C和D失败。但是，如果我单击复选框B，则选中复选框A，它会将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);
})

演示：Fiddle

Answer 2

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

检查计算机A是否没有失败类，如果没有，则执行切换，否则不执行任何操作。

Answer 3

也许只需在点击处理程序中为其他项添加此行：

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

并添加处理它的功能，然后只需调用它并传入您的特定计算机。

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

正确切换类

3 个答案: