javascript - jQuery:无法更改表格单元格的背景颜色

Question

我花了太多时间来解决这个简单的问题。因此，我想看看这个，因为我不明白为什么它不起作用。我习惯于使用 jQuery 更改 CSS 属性，但在这种特殊情况下它不起作用。

所以这是我的函数，它应该改变表格单元格的背景颜色:

$("table#project_table td").click(function () {     //function_td
    var currProjectVar = "#MainContent_CurrProject";
    if ($(currProjectVar).val() == "None") {
        $(currProjectVar).val($(this).attr('id'));
        $(this).css("background-color", "red");
    } else {
        $("table#project_table td#" + $(currProjectVar).val()).css("background-color", "blue");
        $(currProjectVar).val($(this).attr('id'));
        $(this).css("background-color", "red");
    }
})

它确实将背景颜色更改为红色，但没有更改为蓝色。当执行将颜色更改为蓝色的那一行时，什么也没有发生。单元格仍然是红色的。

这是定义表格的代码:

<table id="project_table">
    <tr>
        <td id="0">Project0</td><td id="1">Project1</td><td id="2">Project2</td><td id="3">Project3</td><td id="4">Project4</td><td id="5">Project5</td><td id="6">Project6</td>
    </tr>
    <tr>
        <td id="7">Project7</td><td id="8">Project8</td><td id="9">Project9</td><td id="10">Project10</td><td id="11">Project11</td><td id="12">Project12</td>
    </tr>
</table>

这是我用来存储当前选择的元素的隐藏字段:

<input type="hidden" name="ctl00$MainContent$CurrProject" id="MainContent_CurrProject" value="None">

将新单元格标记为红色或更改当前元素的值都没有问题。我不能让早期的单元格变蓝。我做错了什么？

顺便说一句:不知道这是否重要，但这个脚本在 ASP.NET 网站中运行。

Answer 1

看起来问题行是:

$("table#project_table td#" + $(currProjectVar).val()).css("background-color", "blue");

所以我想方设法 a) 将该行分成多个更简单的行，以及 b) 获取有关每个步骤正在执行的操作的更多信息。

例如，您可以首先在单独的变量中定义 ID 选择器，然后 console.log 选择器字符串，以便您知道它已正确生成:

var target_id = '#' + $(currProjectVar).val();
// This output will be displayed e.g. in the Chrome developer tools console
console.log('The target ID to be bluified is: ' + target_id);
// Your selector can be simplified since a given #ID should be unique for the page.
$(target_id).css("background-color", "blue");

像这样分解是找出具体问题所在/问题所在的第一步。

另外，请注意我上面的评论；我注意到您正在选择父 ID 中的 ID。您永远不需要这样做，因为每个 ID 在页面中都应该是唯一的。如果情况并非如此， 可能就是您遇到问题的原因；您需要将非唯一 ID 更改为类。