jquery - 为 jQuery 中的 2 个不同元素创建相同的事件(不是针对每个元素，而是针对两者!)

Question

我想为表格行中的 2 个不同的 TD 创建一个切换事件。该事件应显示/隐藏下一个表格行。

<table>
    <tr>
        <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td class="clickable1">6</td> <td class="clickable2">7</td>
    </tr>
    <tr>
        <td>this row should be toggled between show/hide once one of the clickable TDs were clicked</td>
    </tr>
</table>

这是我尝试应用的代码，但它已将每个类应用到事件中:

$('.clickable1,.clickable2').toggle(function() {
    $(this).parent()
       .next('tr')
       .show();
}, function() {
$(this).parent()
       .next('tr')
       .hide();
});

还有一件事:我在每个 TR 上应用一个 CSS 悬停伪类。我怎样才能使两个 TR 突出显示(例如对其中两个的悬停效果)？

这是我迄今为止发现的完美工作:

$('.clickable1,.clickable2').click(function() {
   $(this).parent()
          .next('tr')
          .toggle();
});

似乎 TR 通过切换命令记住了它之前的状态!

Answer 1

与其使用切换处理程序，不如根据按钮点击来切换可见性。使用 toggleClass 切换“悬停”类。

$('.clickable1,.clickable2').click(function() {
     var parent = $(this).parent();
     parent.toggleClass('hovered');

     var next = parent.next('tr');
     next.toggle().toggleClass('hovered');
});