Question

每次在行中触发复选框时，我都会在其中删除一个tablerow。我已经让它工作了一行（只有我特意输入行的ID）。有没有办法为javascript函数提供动态输入？我该怎么做？

HTML（嵌入式红宝石）

<tr class="showContainer <%= "hideTableRow#{comment.id}" %>">
  <th><%= check_box_tag "approved#{comment.id}", comment.id, comment.approved, data: { toggle: "hideTableRow#{comment.id}" }, class: 'comment-approve' %></th>
    <th><%= comment.username %></th>
    <th><%= comment.email %></th>
    <th><%= comment.body %></th>
</tr>

这转化为（两个条目）。

<tr class="showContainer hideTableRow1">
  <th><input type="checkbox" name="approved1" id="approved1" value="1" data-toggle="hideTableRow1"></th>
    <th>foobar username1</th>
    <th>foobar email1</th>
    <th>foobar body1</th>
</tr>

<tr class="showContainer hideTableRow3">
  <th><input type="checkbox" name="approved3" id="approved3" value="3" data-toggle="hideTableRow3"></th>
    <th>foobar username3</th>
    <th>foobar email3</th>
    <th>foobar body3</th>
</tr>

我的CSS：

.showContainer {
    display:block;
}

我的JS：

$("#approved1").change(function () {
    $('.' + $(this).data('toggle')).toggle();
});

显然我的JS现在只适用于第一个tablerow。如何制作它以便单独影响？

如果这是一个总的菜鸟问题，请原谅。学习JS是下一个，哈哈。

感谢您的帮助！

Answer 1

您想要选择包含的行，对吗？试试这个：

$('.approved-checkbox').change(function(e){
    $(e.target).closest('.showContainer').toggle();
});

然后在复选框中输入“已批准 - 复选框”类的复选框。或者你想用的任何名字。

official documentation

.change函数的多个输入

1 个答案: