-1

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

站点应该如何工作： 如果我选中计算机 A 的复选框，计算机 A、B、C 和 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);
})

任何帮助将不胜感激 - 谢谢！

4

2 回答 2

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/一般兄弟姐妹/

于 2013-09-18T20:07:47.567 回答
0

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

请注意，如果您执行以下操作，您没有指定会发生什么：

  1. 检查A
  2. 检查 B
  3. 取消选中 A

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

于 2013-09-18T19:49:06.570 回答