在多個元素上顯示隱藏多個div

Question

我必須在表格中顯示已打開的作品（1,2,3 ...），其中包括相關任務（1,2,3 ...）的列表，每個連續。任務可能會被打開或關閉。我嘗試通過點擊類「showhideforwork-x」中的行來找到隱藏/顯示特定工作（表格）的關閉任務（行）的方法。

<table class="work-1"> 
    <tr class="showhideforwork-1"><td>Hide closed tasks</td><tr> 
    <tr><td>Task 1 (opened)</td></tr> 
    <tr class="showhidework-1"><td>Task 2 (closed)</td></tr> 
    <tr class="showhidework-1"><td>Task 3 (closed)</td></tr> 
    <tr><td>Task 4 (opened)</td></tr> 
</table> 

<table class="work-2"> 
    <tr class="showhideforwork-2"><td>Hide closed tasks</td><tr> 
    <tr class="showhidework-2"><td>Task 1 (closed)</td></tr> 
    <tr class="showhidework-2"><td>Task 1 (closed)</td></tr> 
    <tr><td>Task 3 (opened)</td></tr> 
</table> 

<table class="work-n"> 
    <tr class="showhideforwork-3"><td>Hide closed tasks</td><tr> 
    <tr><td>Task 1 (opened)</td></tr> 
    <tr class="showhidework-n"><td>Task 2 (closed)</td></tr> 
    <tr class="showhidework-n"><td>Task 3 (closed)</td></tr> 
</table> 

我想我不使用類的事情應該是這樣捉對「showhideforwork-X」元素和隱藏/顯示相應的「showhidework-X」行的點擊。

Answer 1

您應該指定一個共同的類封閉的元素中，找到與家長和隱藏/顯示（切換），它們內部的類的所有元素

HTML

<table class="work-1"> 
    <tr class="showhideforwork"><td>Hide closed tasks</td><tr> 
    <tr><td>Task 1 (opened)</td></tr> 
    <tr class="showhidework-closed"><td>Task 2 (closed)</td></tr> 
    <tr class="showhidework-closed"><td>Task 3 (closed)</td></tr> 
    <tr><td>Task 4 (opened)</td></tr> 
</table> 

<table class="work-2"> 
    <tr class="showhideforwork"><td>Hide closed tasks</td><tr> 
    <tr class="showhidework-closed"><td>Task 1 (closed)</td></tr> 
    <tr class="showhidework-closed"><td>Task 1 (closed)</td></tr> 
    <tr><td>Task 3 (opened)</td></tr> 
</table> 

<table class="work-n"> 
    <tr class="showhideforwork"><td>Hide closed tasks</td><tr> 
    <tr><td>Task 1 (opened)</td></tr> 
    <tr class="showhidework-closed"><td>Task 2 (closed)</td></tr> 
    <tr class="showhidework-closed"><td>Task 3 (closed)</td></tr> 
</table> 

jQuery代碼

$(".showhideforwork").click(function() { 
    $(this).parent().find(".showhidework-closed").toggle(); 
}); 

編輯： 小提琴 Demo

Answer 2

我做到了。這是你需要的嗎？

$(document).ready(function() { 
 
    function checkTasks(){ 
 
    var check = $('tr td'); 
 
    console.log(check[1]); 
 
    $('tr td').each(function(index) { 
 
    //console.log(index + ": " + $(this).text()); 
 
     if($(this).text().indexOf("closed") != -1){ 
 
\t \t \t $(this).parent().hide(); 
 
\t \t } 
 
    }); 
 
    } 
 
    checkTasks(); 
 
    //you can call this function on body load or set 
 
    //time out to check every 5 or 10 minutes 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="work-1"> 
 
    <tr class="showhideforwork-1"><td>Hide closed tasks</td><tr> 
 
    <tr><td>Task 1 (opened)</td></tr> 
 
    <tr class="showhidework-1"><td>Task 2 (closed)</td></tr> 
 
    <tr class="showhidework-1"><td>Task 3 (closed)</td></tr> 
 
    <tr><td>Task 4 (opened)</td></tr> 
 
</table> 
 

 
<table class="work-2"> 
 
    <tr class="showhideforwork-2"><td>Hide closed tasks</td><tr> 
 
    <tr class="showhidework-2"><td>Task 1 (closed)</td></tr> 
 
    <tr class="showhidework-2"><td>Task 1 (closed)</td></tr> 
 
    <tr><td>Task 3 (opened)</td></tr> 
 
</table> 
 

 
<table class="work-n"> 
 
    <tr class="showhideforwork-3"><td>Hide closed tasks</td><tr> 
 
    <tr><td>Task 1 (opened)</td></tr> 
 
    <tr class="showhidework-n"><td>Task 2 (closed)</td></tr> 
 
    <tr class="showhidework-n"><td>Task 3 (closed)</td></tr> 
 
</table>