如何显示/隐藏某些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中引入一些技巧。如果一切都有一个唯一的ID（即使它只是产生的DIV当增加计数器），并且可以对应.link_button ID来.blueflip标识（例如，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