0

我正在尝试建立一个显示失败的小型网站。这里以 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');

如果这有点令人困惑，我深表歉意。在此先感谢您的帮助！

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(){
    !$('#computerA2').hasClass('failure') ? $('#computerB2').toggleClass('green failure') : '';
});

检查计算机 A 是否没有失败类，如果没有，则执行切换，否则什么也不做。

于 2013-09-18T15:57:35.843 回答
0

也许只需在其他项目的点击处理程序中添加这一行：

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

并添加函数来处理这一切，然后调用它并传入您的特定计算机。

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