Question

我和以下人员有点挣扎。我有一个有2行的表，在行中有三个TD＆＃39; s。每个td都包含/api/{entity}/count和<img>。

默认情况下，某些<div class="overlay"> div是打开的。 如果点击TD ，我希望这些也关闭。

目标： 如果您点击某个TD，则想要打开/显示该特定叠加层并关闭所有其他叠加层（也是默认打开的叠加层）。 .overlay可以保持原样。

HTML结构

<img/>

jQuery （效果不佳）

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

Answer 1

假设它是隐藏覆盖的隐藏类，所以只需切换隐藏的类

$("#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，则

$（＆＃34; #table_overview tr td＆＃34;）。on（＆＃39; click＆＃39;，function（）{ $（this）.parent（）。parent（）。find（＆＃39; .overlay＆＃39;）。addClass（＆＃34; hidden＆＃34;）; $（本）.find（＆＃39; .overlay＆＃39;）。removeClass（＆＃39;隐藏＆＃39;）; }）;

jQuery show＆amp;隐藏表td中的元素

1 个答案: