来自单个事件的多重 JQuery 影响

Question

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

我的切换效果很简单

$(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');
    }
  });
});

每次点击都会 add/remove 'selected' class 我会用它来改变行的颜色。但是，我发现所选 class 仅在我对单击事件使用匿名函数并为额外行添加代码时才会生效，从而破坏了该函数。

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

这是我正在使用的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

您可以简单地选中/取消选中它：

$(document).ready(function() {
  $('#row5 tr').click(function(event) {
    $(this).toggleClass('selected');
    if ($(event.target).is(':not(:checkbox)')) {
      $(':checkbox', this).prop('checked', $(this).hasClass('selected'));
      // if you want to trigger click handler bound to checkbox
      // without making it bubbles, use:
      /*$(':checkbox', this).triggerHandler('click');*/
    }
  });
});

-jsFiddle-

Answer 2

这是我会做的：

$(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()）并防止复选框状态（checked/not 选中）和行状态（selected/not 选中）永远变得不一致。

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

来自单个事件的多重 JQuery 影响

Multiple JQuery effects from a single event

html

javascript

css

jquery

slidetoggle

-jsFiddle-