jQuery：基於單擊的按鈕隱藏/顯示表行

Question

我在一頁上並排放置了兩個桌子。 左表包含帶有公司名稱的按鈕，右表應包含連接到特定公司的員工。

加載頁面時，不應有任何員工。 如果用戶單擊其中一個按鈕，則應顯示與該公司相連的員工的表行。 如果我再次單擊相同的按鈕或另一個按鈕，則員工行應隱藏（彈出新行）。

這些按鈕具有一個公司ID為（1、2、3 ..）的類，而行具有一個ID為trclass1，trclass2，..等的類。

我嘗試使用此功能：

    $(document).ready(function()
    {
        $(".clickbtn").click(function(event)
        {
            $('[id=trclass'+event.target.id+']').toggle();
        });
    });

clickbtn是按鈕的名稱，trclass是表行的類。

<button id='1' class='clickbtn' />
<button id='2' class='clickbtn' />
.
.

<tr id='trclass1' hidden> ...
<tr id='trclass2' hidden> ...
.
.

有時它起作用。 似乎沒有任何模式，如果它起作用或不起作用。

我的問題是，除了對jQuery一無所知外，如何將參數正確地傳遞給函數並使它每次都能工作。 上面的jQuery代碼來自另一個具有相同問題的問題，但是與我的有所不同。 最后但並非最不重要的一點是，要顯示的公司或員工數量並沒有固定的數量，數據是從數據庫中獲取的。

Answer 1

這里的重要性是理解jQuery的$(this)和普通的舊javascript event.target之間的區別。

考慮這個例子 。

藍色的大框是我們的按鈕，它包括其中的所有紅色框。 請注意，當您將鼠標懸停在它們上方時： $(this)始終引用事件綁定到的元素。 因為我們的事件與按鈕單擊相關，所以$(this)始終引用button 。

另一方面，在許多情況下， event.target幾乎都過於特定 。 當您將鼠標懸停在紅色框上時，您會注意到event.target指的是被懸停的確切元素 。 通過執行event.target.id ，您將獲得div的ID而不是按鈕的ID。

---

因此，我真的認為您的解決方案非常簡單：使用jQuery的$(this)代替event.target 。

$('.clickbtn').click(function() { 
    var btnID = $(this).attr("id");
    $("#trclass"+btnID).toggle();
});

---

如果只希望顯示所單擊按鈕的行，則可以使用.hide()隱藏所有其他按鈕。 如果為表指定ID，則可以通過$("#my-table-id tr")選擇所有行，但是在這種情況下，您需要使用“開頭為”選擇器[id^=trclass] 。 如果這是頁面上的唯一表，請考慮僅使用$("tr") ，它會選擇頁面上的每個表行。

$('.clickbtn').click(function() { 
    var btnID = $(this).attr("id");
    $("[id^=trclass]").not(this).hide();
    $("#trclass"+btnID).toggle();
});

Answer 2

聽起來問題是由於元素是動態創建的。 為了解決這個問題，您需要將click處理程序附加到頁面上始終存在的元素，該元素又委派click事件 ：

$(document).ready(function() {
  $(document).on("click", ".clickbtn", function(event) {
    $('[id=trclass'+event.target.id+']').toggle();
  });
});

在上面的示例中，單擊處理程序附加到document ，只要單擊.clickbtn就會觸發。 這應該導致每次點擊都起作用。

希望這可以幫助！ :)