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

Question

我正在努力一点点以下。我有一个2行的表，并在行内的三个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

假设它是隐藏的类，它隐藏叠加，所以只需拨动隐藏类

$("#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（'click'，function（）{（this）.parent（）。parent（）。find（'.overlay'）。 addClass（“hidden”）; $（this）.find（'.overlay'）。removeClass（'hidden'）; }）;