当我有多个具有相同类名的div时如何显示/隐藏某些div

Question

我有多个div，其类名称为blueflip，我想在单击div link_button时切换此类的div内容。

我的代码：

$(document).ready(function(){
   $('.blueflip').hide(); 
   $('.link_button').click(function() {
      $('.blueflip').toggle(400);
      return false;
   });
});

工作正常。 但是我的问题是，我的页面在整个页面上都有多个link_button和blueflip div。 当我单击link_button的任何一个时，所有blueflip div都在切换。 但我只需要切换相应的子级blueflip div

注意： div是从数据库动态生成的。

如何实现这一点，请Plz帮助。 任何建议将不胜感激

Answer 1

这应该做到这一点，假设.blueflip是一个孩子.link_button ：

$(document).ready(function(){
   $('.blueflip').hide(); 
   $('.link_button').click(function() {
      $(this).find('.blueflip').toggle(400);
      return false;
   });
});

由于jQuery的.find()方法始终可以搜索父jQuery对象指示的选择器的后代，因此该方法有效。

如果.blueflip节点不是相应.link_button节点的子节点，则可能需要在对象ID中引入一些.link_button 。 如果所有内容都有唯一的ID（即使在生成DIV时它只是一个增量计数器），并且您可以将.link_button ID与.blueflip ID相对应（例如div#lb_001对应于div#bf_001 ），那么这应该可以工作：

$(document).ready(function(){
   $('.blueflip').hide(); 
   $('.link_button').click(function() {
      $('#bf' + $(this).attr('id').substr(2)).toggle(400);
      return false;
   });
});

Answer 2

如果您知道页面的结构，则必须遍历dom树，查找所需的div（可能基于到目前为止已计数的div）。

http://www.quirksmode.org/dom/intro.html

http://www.howtocreate.co.uk/tutorials/javascript/dombasics