在多个元素上显示隐藏多个 div

Question

我必须在 table 秒内显示打开的作品（1、2、3...），包括相关任务列表（1、2、3...），每一个连续.任务可以打开或关闭。我尝试通过单击 class "showhideforwork-x" 中的行之类的元素来找到 hide/show 特定工作 (table) 的已关闭任务（行）的方法。

<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>

我想我没有按照应有的方式使用 classes 来捕捉对 "showhideforwork-x" 元素和 hide/show 相应 "showhidework-x" 行的点击。

Answer 1

您应该为封闭元素分配一个公共 class，在父级中找到所有具有该 class 的元素并 hide/show（切换）它们

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();
});

编辑： Fiddle 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){
   $(this).parent().hide();
  }
    });
  }
  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>

在多个元素上显示隐藏多个 div

Show hide multiple divs on multiple elements

jquery

html-table

show-hide