jQuery在表td中显示和隐藏元素

Question

I'm struggling a little bit with the following. I have a table with 2 rows and within the rows three TD's. Each td contains and <img> and a <div class="overlay"> .

Some of the .overlay divs are open by default. I want these to close too if there is a click on a TD .

Goal: If you click on an TD a want to open/show that particular overlay and close all others (also the overlay's that are open by default). The <img/> can stay where it is.

HTML Structure

<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 (not working well)

$(#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

Assuming that it is the hidden class that hides the overlay, so just toggle the hidden class

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

or simply

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

If you want to close all other overlay div's that are not hidden for a particular row, then

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

If you want to close all other overlay div's that are not hidden for complete table, then

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