javascript - 如何利用 jQuery 来检测带有动态生成的 ID 的选择标签上的变化并更改选择的选项

Question

我们在网络框架 (Rails 4.2.x) 生成的用户“个人资料”页面上创建了一个两列的 HTML 表格，允许用户动态地向表格中添加行(通过单击“添加行”按钮)。一切都按设计工作。这两列包含两个选择标签下拉列表，“user_name”和“user_lunch”，示例如下:

<table id="user-lunch-table">
<tr>
    <th>User</th>
    <th>Lunch</th>
</tr>
<tbody id='user-lunch-table-body'>
    <tr class='nested-fields'>
        <td><%= f.select :user_name, @user_names %></td>
        <td><%= f.select :user_lunch, @user_lunch1 %></td>
    </tr> 
</tbody> 

变量@user_names 由[ "jim", "ted"] 组成，变量@user_lunch1 由[ "chicken", "steak", "fish"] 组成，变量@user_lunch2 由[ "salad"组成， “ bean 腐” ]。

由于表的动态特性(用户可以随意添加行)，框架会自动将行特定的整数(以 0 开头)插入到表中每个 td 的 ID 中。例如，用 Firebug 检查表表明分配给第一行“name”列的 ID 是“profile_attributes_0_user_name”，分配给下一行相同列的 ID 是“profile_attributes_1_user_name”，下一行是“profile_attributes_2_user_name”，等等。

一段时间以来，我们一直在研究如何利用 jQuery 来检测给定行中“user_name”选择标签(“Name”列)的变化，并在发生变化时，改变 select 中的选项下一列(“user_lunch，“午餐”列)。在这种情况下，“午餐”列的选择选项设置为@user_lunch1。当用户名下拉列表从“jim”更改为“ted”时对于给定的行，我们希望该行的 user_lunch 列将用于选择的选项从 @user_lunch1 更改为 @user_lunch2。

鉴于动态 ID 分配，第一个问题是使用 jQuery 检测 user_name 选择标记更改并识别发生更改的行。通常(如果 td ID 是静态的)我们会通过类似以下的方式检测更改(请注意 Rails 4.2 默认为 CoffeeScript 格式；提供标准 JS 格式的解决方案是完全可以接受的):

$(document.ready) ->
    $('#profile_attributes_0_user_name').change(-> 

但是，由于 ID 是动态的，我们需要能够使用通配符或正则表达式来确定更改。

因此，我们需要检测包含“profile_attributes_”和“_user_name”的任何 td ID 的 .change()。然后，我们需要确定“profile_attributes_”和“_user_name”之间的值(0、1、2 等)来标识行。最后，我们需要更改同一行上相应的“user_lunch”列，将用于选择的选项从 @user_lunch1 替换为 @user_lunch2。

提前感谢您的帮助。

Answer 1

您用来跟踪表中各种元素的方法(即使用 id 连接)是一种代码味道。它会引导你走上一条过于复杂的道路，这应该让人坐下来质疑这个想法。

解决此问题的一种方法是简单地使用单元格的类名来导航到选择已更改的行中的相关单元格，然后在该单元格中获取选择。例如:

<td class="user-name"><select...></td>
<td class="user-lunch"><select...></td>

如果触发了 .user-name 单元格中的选择，您可以使用它来查找行，然后导航到 .user-lunch 中的选择:

$(".user-name select").on("change", function() {
    var $this = $(this),
        userLunch = $this.closest("tr").find(".user-lunch select");

    //Populate userLunch select here...
});