javascript - jQuery 显示和隐藏表格 td 中的元素

Question

我正在努力解决以下问题。我有一个包含 2 行的表格，在行中有 3 个 TD。每个 td 包含和 <img>和一个 <div class="overlay"> .

一些 .overlay默认情况下打开 div。 如果点击 TD，我也希望它们关闭。

目标: 如果您单击一个 TD，想要打开/显示该特定覆盖并关闭所有其他覆盖(也包括默认打开的覆盖)。 <img/>可以留在原地。

HTML 结构

<table id="table_overview">
  <tr>
     <td><img src="foo.jpg"/><div class="overlay">text</div></td>
     <td><img src="foo.jpg"/><div class="overlay hidden">text</div></td>
     <td><img src="foo.jpg"/><div class="overlay hidden">text</div></td>
  </tr>
  <tr>
     <td><img src="foo.jpg"/><div class="overlay hidden">text</div></td>
     <td><img src="foo.jpg"/><div class="overlay hidden">text</div></td>
     <td><img src="foo.jpg"/><div class="overlay">text</div></td>
  </tr>
</table>

jQuery(效果不佳)

$(#table_overview td).each(function(){
   $(this).on('click', function(){
       if($(this).find('.overlay').hasClass('hidden')){
          $(this).find('.overlay').show();
       }
   }, function(){
       // second click on td close this overlay.
   });
});

Answer 1

假设是hidden class隐藏了overlay，那么切换hidden class就可以了

$("#table_overview tr td").each(function(){
   $(this).on('click', function(){
       $(this).find('.overlay').toggleClass('hidden');
   });
});

或者只是

$("#table_overview tr td").on('click', function(){
       $(this).find('.overlay').toggleClass('hidden');
});

如果你想关闭所有其他没有为特定行隐藏的覆盖 div，那么

$("#table_overview tr td").on('click', function(){
       $(this).parent().find('.overlay').addClass( "hidden" );
       $(this).find('.overlay').removeClass('hidden');
});

如果你想关闭所有其他没有为完整表格隐藏的覆盖 div，那么

$("#table_overview tr td").on('点击', function(){ $(this).parent().parent().find('.overlay').addClass( "hidden"); $(this).find('.overlay').removeClass('hidden'); });