jQuery 用于根据下拉列表的更改值在 asp 中继器中设置背景颜色

Question

我的 asp.net web 页面中有一个中继器，其中包含一个带有行的表。 一行中有几个文本框、下拉列表和其他字段。 我想要的是，当我的转发器行中的一个下拉列表的值发生变化时，整个表格行都会获得一种颜色。 我设法在服务器端做这个，但我想要它在客户端。

这是我的代码：

HTML

<table id="InvoerUrenTable" class="InvoerUrenLeftMargin100">    
<asp:Repeater ID="urenRepeater" runat="server">
    <ItemTemplate>
        <tr runat="server" ID="itemTemplateRow">
            ...
            ...
            ...
            <td >
                <asp:DropDownList runat="server" ID="projectDropDown" ></asp:DropDownList>
            </td>
            ...
            ...
            ...
            ...
        </tr>
    </ItemTemplate>
</asp:Repeater>
</table>
<script type="text/javascript">
      $(document).ready(function () {
          $('#projectDropDown').change(function () {
              var index = $(this).parent().children().index($(this));
              $('#urenRepeater tr:nth-child(' + index + ')').addClass("highlight")    
          });
      });
</script>

CSS

.highlight {
background-color: #E52718;
}

上面的脚本似乎不起作用。 我究竟做错了什么？

更新 06/07/2020

我发现我选择了错误的行 ID 来更改 class。

  <script type="text/javascript">
      $(document).ready(function () {
          $('.projDropDown').change(function () {
              var index = $(this).parent().children().index($(this));
              $('#body_urenRepeater_itemTemplateRow_' + index).addClass("highlight")    
          });
      });
  </script>

现在是我的索引错误的问题，如果我更改其中一个下拉列表的值，它每次都会标记第一行。

Answer 1

由于下拉列表位于中继器中 - 因此可能会在最终页面中多次复制 - 最终会在呈现的 HTML 中以不同的 ID 结束（如果 asp.net 尝试使 ID 在浏览器中唯一），或者您最终会得到多个具有相同 ID 的下拉列表（这是无效的）。 无论哪种方式，您都会遇到问题，因为 jQuery 代码无法识别正确的目标。

我建议使用 CSS class 作为您的选择器。 asp.net 渲染引擎不会改变这一点，它还允许您使用一个事件处理程序来定位多个元素。

例如

<asp:DropDownList runat="server" ID="projectDropDown" CssClass="projDropDown" ></asp:DropDownList>

和

$('.projDropDown').change(function () {