Question

我正在创建一个小型交互式，实际上是一个表格，用户点击<td>上的复选标记点击该图像将改变颜色。在用户做出所有决定后，他们将点击提交，这是我可以使用一些帮助的部分。

目前我的计划/想法是如何为表格（4x7）的表格（28）分配一个ID给所有<td>。我的想法是，如果我做类似的事情 - ＆gt;

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事件，它会将其更改为突出显示的版本。

除了这一行之外，表格还有更多内容，但最终结果是当用户点击所有内容时，他们会点击提交按钮。点击后，将检查每个框以查看它是否正确，如果是，则背景变为绿色，如果不是则为红色。所以td1可能等于（clicked = 1）而td2等于（clicked = 2）。

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

Answer 1

将所有“可点击”元素分配到同一个类，并使用jQuery注册该类的侦听器，该jQuery将切换样式（红色或绿色）。您也可以只为所有td元素添加一个侦听器，但您可能会意外地选择不打算使其可点击的元素。

使用CSS进行红色/绿色样式。

CSS

.red {
    background-color: red;
}

.green {
    background-color: green;
}

Javascript（jQuery）：

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

Answer 2

可能有更好的方法，但我会做这样的事情。

HTML：

<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>

JS：

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");
    });
});

http://jsfiddle.net/PXEt9/

jQuery Interactive：简化代码的可能方法

2 个答案: