在多个元素上显示隐藏多个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>