0

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

目前我关于如何解决这个问题的计划/想法是为所有<td>带有表格（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 事件，它会将其更改为突出显示的版本。

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

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

4

2 回答 2

3

将所有“可点击”元素分配给同一个类，并使用 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');
    }
});
于 2013-04-15T19:04:16.197 回答
1

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

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/

于 2013-04-15T19:12:02.183 回答