jqueryinteractive：简化代码的可能方法

我正在创建一个小的交互界面，本质上是一个表格，用户将在该表格中单击

中的复选标记，单击后图像将改变颜色。在用户做出所有决定后，他们将单击提交，这是我需要一些帮助的部分

目前，我的计划/想法是为所有

的表（28）分配一个ID。表的大小为（4x7）。我的想法是如果我做了类似->

If TD1 $clicked == 1 then (true)
  TD1.css("background-color", "green");
else
  TD1.css("background-color", "red");

If TD2 $clicked == 3 then (true)
  TD2.css("background-color", "green");
else
  TD2.css("background-color", "red");

If TD3 $clicked == 2 then (true)
  TD3.css("background-color", "green");
else
  TD3.css("background-color", "red");

等等

我知道这个语法不是100%正确，但想法是存在的。所以我会对所有28项都这样做。我所要求的；有没有一种我没有看到的更简单的方法？任何帮助都将不胜感激

编辑：

这里有一些代码

<table> 
<tr>
        <td>Frying</td>
        <td id="td1"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
        <td id="td2"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td3"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td4"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td5"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td6"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
<td id="td7"><img src="img/check.png" width="30" height="30" /><img src="img/check.png"     width="30" height="30" /><img src="img/check.png" width="30" height="30" /></td>
        </tr>
</table>

油炸

在jQuery中，img将有一个onclick事件，它将把img更改为突出显示的版本

表中的内容不止这一行，但最终结果是当用户单击所有内容时，他们将单击提交按钮。单击后，将检查每个框是否正确，如果正确，则背景更改为绿色，如果不正确，则为红色。因此，td1可能等于（单击=1），而td2等于（单击=2）

很抱歉，我之前没有提供足够的信息，这里仍然很新。

将所有“可单击”元素分配给同一个类，并使用jQuery注册该类的侦听器，该类将切换样式（红色或绿色）。您也可以只向所有

td

元素添加一个侦听器，但您可能会意外地选择不打算使其可单击的元素

对红色/绿色样式使用CSS

CSS

Javascript（jQuery）：

将所有“clickable”元素分配给同一个类，并使用jQuery为该类注册一个监听器，该监听器将切换样式（红色或绿色）。您也可以只向所有

td

元素添加一个侦听器，但您可能会意外地选择不打算使其可单击的元素

对红色/绿色样式使用CSS

CSS

Javascript（jQuery）：

---

也许有更好的方法，但我会这样做

HTML:

---

也许有更好的方法，但我会这样做

HTML:

---

您可能完全可以跳过if并执行$（this）.css（…）.sibbins（）.css（…）@KevinB这种方法不允许只进行一次选择吗？例如：点击TD1->绿色背景->所有其他tds->红色背景。@Justin这远不是一个完整的解决方案，问题中没有足够的信息来提供完整的解决方案。toggleClass可能更合适。我不确定的是，某些值为1，而其他值为2或3。可能有一个特定的类附加到这些div？@Jobokai您有任何实际的代码要显示吗？您可能可以完全跳过if并执行$（this）.css（…）.sides（）.css（…）@KevinB这种方法不允许只进行一个选择吗？例如：点击TD1->绿色背景->所有其他tds->红色背景。@Justin这远不是一个完整的解决方案，问题中没有足够的信息来提供完整的解决方案。toggleClass可能更合适。我不确定的是，某些值为1，而其他值为2或3。可能有一个特定的类附加到这些div？@Jobokai您有实际的代码要显示吗？整个if语句可以压缩为

$（this）.toggleClass（“红-绿”）

假设默认情况下它们都有一个或另一个。如果每个

td

的开始是

红色

或

绿色

，那么你是对的。否则您每次都会添加或删除这两个类。整个if语句可以压缩为

$（this）。切换class（“红-绿”）

，假设默认情况下它们都有一个或另一个。如果

td

的每个开头都是

red

或

green

，那么您是对的。否则每次都会添加或删除这两个类。

.red {
    background-color: red;
}

.green {
    background-color: green;
}

$('.clickable').on('click', function(e) {
    if($(this).is('.red')) {
        $(this).removeClass('red').addClass('green');
    } else {
        $(this).removeClass('green').addClass('red');
    }
});

<table>
    <tr><td><input type="checkbox" name="0"/>0</td></tr>
    <tr><td><input type="checkbox" name="1"/>1</td></tr>
    <tr><td><input type="checkbox" name="2"/>2</td></tr>
</table>

var colors = ["blue", "green", "yellow"];
$(function () {
    $("input").on('click', function () {
        $(this).is(':checked') ?
            $(this).parent().css("background-color", colors[$(this).attr('name')]) :
            $(this).parent().css("background-color", "white");
    });
});