javascript - 来自单个事件的多个 JQuery 效果

Question

我是 JQuery 的新手，但对 HTML 和 CSS 有一些经验。我正在尝试使表单上的复选框列表更具交互性，虽然我可以将它们放在表格中，但单击每行内的任意位置会选中相应的复选框并更改行颜色，以便用户知道选择已完成制成。对于某些行，我需要一个切换效果来显示可以输入更多信息的新行。我在自己做这些事情方面取得了一些成功，但无法让他们一起工作。请帮忙!

我的切换效果很简单

$(document).ready(function(){
    $("#top1").click(function(){$("#bottom1").toggle();});
    $("#top2").click(function(){$("#bottom2").toggle();});
});

对于我使用的点击选择

$(document).ready(function() {
  $('#row5 tr').click(function(event) {
    $(this).toggleClass('selected');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});

每次点击都会添加/删除我用来更改行颜色的“选定”类。但是，我发现只有当我对点击事件使用匿名函数并为额外行添加代码时，所选类才会生效，这会破坏该函数。

我错过了什么，还是我做错了？会喜欢一些指导。

这是我正在使用的 HTML 结构

<table class="rowclick" id="rowclick5">
  <tbody>
    <tr>
      <td class="cb"><input type="checkbox" value="yes" /></td>
      <td>row 1</td>
    </tr>    
    <tr>
      <td class="cb" id="bottom2"><input type="checkbox" value="yes" /></td>
      <td>row 2</td>
    </tr>    
    <tr>
      <td class="cb"><input type="checkbox" value="yes" /></td>
      <td>row 3</td>
    </tr>
  </tbody>
</table>

Answer 1

这是我会做的:

$(function() {
    $(document).on('click', '#row5 tr', function (event) {
        var newState = !$(this).is('.selected');

        $(this)
            .toggleClass('selected', newState)
            .find(':checkbox').prop('checked', newState);
    });
});

这使用 event delegation (通过 $(document).on())并防止复选框的状态(选中/未选中)和行的状态(选中/未选中)变得不一致。

请注意，我可能会使用 tr.selectable 而不是 #row5 tr，因为后者有点过于具体，因此阻碍了可重用性。