在jQuery中爲兩個不同的元素創建相同的事件（不是爲每個元素都爲！）

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

感謝所有的答案傢伙！ 下面是我找到了完美迄今進行的工作：

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

Answer 2

而不是使用切換處理程序，只需根據按鈕單擊切換可見性。使用toggleClass切換「懸停」類。

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

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

Answer 3

Check this jsFiddle out演示兩個請求的行爲。請注意，我將類clickable1和clickable2更改爲可點擊，因爲在您的示例中沒有看到任何理由有兩個類。如果你願意的話，可以稍微調整一下。下面還包含代碼的情況下的jsfiddle死亡：

HTML：

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

CSS：

.clickable{cursor:pointer;} 
.hide{display:none;} 
.hover{font-weight:bold;border:solid 1px blue;background-color:yellow;}​ 

的jQuery：

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

Answer 4

如果你真的只想要一個事件，一種選擇是將處理程序放在父容器上，並依靠自動冒泡來觸發它。

您可以正常使用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(); 
    } 
}); 

或者，你可能只有一個火其他。

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

$('.clickable2').click(function() { 
    $(this).prev().click();  // Fires the click event for its previous sibling 
}); 

---

對於懸停，這將是一個方法。

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

}); 

Answer 5

爲什麼你不能這樣做？

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

此外，你可能想 take a look at this answer。

至於TR上的psuedo-class，你將不得不使用另一個事件處理程序，因爲這是一個自定義行爲。幸運的是，這很容易：

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