为jQuery中的两个不同元素创建同一事件（不是为每个元素创建，而是为两个元素创建！）

我想为我的表行中的两个不同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>

还有一件事：我正在每个TR上应用CSS hover psuedo类。如何突出显示两个TR（如其中两个上的悬停效果）

以下是到目前为止我发现效果很好的方法：

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

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

---

TR似乎通过toggle命令记住了它以前的状态

不要使用切换处理程序，只需基于按钮单击切换可见性即可。使用toggleClass来切换“hover”类的输入和输出

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

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

演示这两种请求的行为。请注意，我将clickable1和clickable2类更改为clickable2类，因为在您的示例中，我看不出有任何理由有两个类。如果你愿意的话，可以通过小的调整来改变。如果JSFIDLE死亡，代码也包括在下面：

HTML:

jQuery：

$(".clickable").click(function() {
    $(".toggleVis").toggleClass("hide");
});
$('tr', "#table").hover(
    function() {
        $(this).toggleClass("hover");
    },
    function() {
        $(this).toggleClass("hover");
    });

---

如果您真的只需要一个事件，一个选项是将处理程序放在父容器上，并依靠自动冒泡来触发它

通常可以使用jQuery的

delegate（）

函数，但我认为它不支持

toggle

事件

$('tr:has([class^=clickable])').toggle(function(e) {

        // Verify that the target had a clickable class
    if($(e.target).closest('[class^=clickable]').length ) {

            // No need to call .parent() since the handler is now on the <tr>
        $(this).next('tr').show();
    }
},
function(e) {

        // Verify that the target had a clickable class
    if($(e.target).closest('[class^=clickable]').length ) {

            // No need to call .parent() since the handler is now on the <tr>
        $(this).next('tr').hide();
    }
});

---

对于悬停，这将是一种方法

$('tr:has([class^=clickable]):even').hover(
  function() {
      $(this).addClass('hilite')
      .next().addClass('hilite');
  },
  function() {
      $(this).removeClass('hilite')
      .next().removeClass('hilite');

});

---

你为什么不能这么做

$('.clickable1,.clickable2').click(function(e){
    var nTR=$(e.target).parent().next('tr');
    if (nTR.css("display")!="none") nTR.hide();
    else nTR.show();
});​​​​​​

另外，你可能想

至于TRs上的psuedo类，您必须为此使用另一个事件处理程序，因为它是一种自定义行为。幸运的是，这很容易：

$("tr").hover(function(){
  $(this).next('tr').andSelf()
     .css("backgroundColor","#F00");},
  function(){$(this).next('tr').andSelf()
     .css("backgroundColor","#FFF");
});

---

谢谢大家的回答！ 以下是到目前为止我发现效果很好的方法：

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

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

---

假设显示/隐藏是切换所需的唯一功能，这是一个很好的解决方案。首先，请记住OP可能有两个不同类的原因，而不仅仅是事件处理。其次，单击处理程序将使用类

.toggleVis

切换所有元素，而OP只想切换下一行（非常安全的假设是他有多个行对）。第三，对于行hilighting on hover，OP希望hilighting每一行及其对（单击事件中隐藏的那一行）。您应该创建一个答案并将其标记为有效。否则，这个问题会一直出现在“未回答的问题”列表中。好的，我刚刚添加了答案，如何将其标记为有效？

$("tr").hover(function(){
  $(this).next('tr').andSelf()
     .css("backgroundColor","#F00");},
  function(){$(this).next('tr').andSelf()
     .css("backgroundColor","#FFF");
});

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