Question

我最近提出了另一个关于翻转课程的问题。最初我认为有一个解决方案，但看起来我还有一些问题。我正在尝试建立一个小网站，显示某些项目的失败和成功。以下是我正在尝试构建的示例：http://jsfiddle.net/zrYLh/4/

网站的运作方式： 如果我选中计算机A的盒子，计算机A，B，C＆amp; D应该变红。如果我然后选中计算机B的复选框，则不应更改任何内容。如果我取消选中计算机B的复选框，则所有项目仍应保持红色，因为计算机A仍然处于检查状态，并且它本身会导致A，B，C和D的红色。对于任何检查组合，都应该采用相同的逻辑。

目前，代码强制某些项目切换回绿色，即使其他项目要求它们保持红色。例如，当选中A和B，然后取消选中B时，它会强制A和C变为绿色。

这是我现在的脚本：

$('#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(){
    var state = this.checked;
    $('#computerA2, #computerC2').toggleClass('green', !state).toggleClass('failure', state);
})

$('#computerA, #computerC').click(function(){
    var state = this.checked || $('#computerB').is(':checked');
    $(this).prev().toggleClass('green', !state).toggleClass('failure', state);
})

非常感谢任何帮助 - 谢谢！

Answer 1

我不确定你的目标是什么，但是如果我理解你的话，那么实际上只有一个css解决方案。

看看这个：http://jsfiddle.net/zrYLh/5/

我做了什么：

我重新调整了你的html。并非所有必要的，但在语义上更正确的imo，并且通过删除大量的id更容易维护。但是，必须将标签放在复选框之前才能使用此技术。
重组意味着我已经改变了你的一些css以使其再次运作。现在再次更容易维护，并且摆脱了大部分的绝对定位（只有在它是唯一可行的方式时才使用它们，或者当你必须在代码中更改某些东西时你会后悔）

'魔术'位于css的以下行：

#business input[type="checkbox"]:checked ~ label {
    background-color: red;
}

此选择器允许您选择复选框前面的所有标签。

有关更多信息，您可以阅读有关:checked伪类的信息：
http://css-tricks.com/almanac/selectors/c/checked/
或者这是关于兄弟选择器~：
http://css-tricks.com/almanac/selectors/g/general-sibling/

Answer 2

尝试更新代码：http://jsfiddle.net/JB3kM/1/。

请注意，如果您执行以下操作，则未指定应执行的操作：

检查A
检查B
取消选中A

那么应该是B绿色还是A？如果是B，请从第3行中删除部分this.checked &&

条件类切换

2 个答案: