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

我在頁面上並排了兩張桌子。左表包含帶公司名稱的按鈕，右表應包含連接到特定公司的員工。jQuery：隱藏/顯示基於點擊按鈕的表格行

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

按鈕有一個公司ID（1,2,3 ...）的類，行有一個類，如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代碼來自另一個問題，它有相同的問題，但與我的不同。最後但並非最不重要的是，有多少公司或員工在那裏展示數量不是固定的，數據是從數據庫中提取的。

來源

2017-03-15 Ceriana

也許這：'$（ 'clickbtn'）點擊（函數（）{VAR btnID = $（本）.attr（「ID」）; $（「＃trclass」 + btnID）.toggle （）;}）;' – Santi

這裏的重要性是瞭解jQuery的$(this)和普通的舊javascript的差異event.target。

考慮this example。

大藍框是我們的按鈕，它包括裏面的所有紅框。請注意，當您將鼠標懸停在它們上方時：$(this)始終指的是事件綁定到的元素。因爲我們的活動綁定了按鈕點擊，$(this)總是指按鈕。

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")來選擇所有的行，但在你的情況下，你需要使用「starts with」選擇器[id^=trclass]。如果這是該頁面上的唯一表格，請考慮使用$("tr")，該選項可選擇頁面上的每個表格行。。

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

來源

2017-03-15 22:55:07 Santi

謝謝，這是想要它打算做的。要隱藏沒有匹配id的行，我將代碼更改爲'$（「[id^= trclass]」）。hide（）; $（「[ID = trclass」 + btnID）.show（）;'。它有效，但這是隱藏所有其他行的唯一方法嗎？只是好奇。 – Ceriana

請注意jQuery中的選擇器：例如，'$（「＃my-id」）'選擇一個元素'id =「my-id」'，'$（「。my-class」）'選擇一個元素元素'class =「my-class」'，最後'$（「button」）'選擇一個元素'

該問題聽起來是由於元素被動態創建的緣故。爲了解決這個問題，你需要點擊處理程序附加到總是存在的頁面，這反過來又代表的Click事件上的元素：

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

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

希望這會有所幫助！ :)

來源

2017-03-15 22:41:08

我想冒險猜測，如果OP不知道jQuery，「從數據庫中提取」的元素不是動態創建的，而是在頁面加載。其次，'event.target.id'並不總是以正確的元素爲目標，如果事實上在處理程序中有多個元素 - 當我的意圖是要獲取該元素的ID時，使用'event.target.id'似乎很奇怪引發事件的DOM元素。第三，@RobertFrenette，活動聽衆會花費你的工作效率。爲什麼每個事件都有一個偵聽器，而不是一個偵聽器來處理它們呢？ – Santi

你的解決方案似乎仍然是隨機的。上述@Santi提供的解決方案按預期工作。 – Ceriana

啊，我想這些元素不是動態創建的。我向@Santi承認;他似乎已經找到了有效的解決方案:) –

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

回答

相關問題