jQuery的动态选择显示格

Question

我有一组动态的标题和隐藏的div的想法，当用户点击一个标题就会切换的DIV下方显示/隐藏

的div都有一个id在形成“div_x”，其中x是动态生成的

我设法使用.each（）来循环以div_开头的所有div，我可以分割id的x部分，但我不确定如何获取jquery得到每个标题显示/隐藏只有相关的其他div

$('#[id^=div_]').each(function(){ 

    exploded_id = this.id.split("_"); 
    id = exploded_id[2]; 

    $("#"+this.id).click(function() { 

     $("#div_body_"+id).slideToggle("slow"); 

    }); 

}); 

我确定有人能够指出这里的缺陷

Answer 1

你的选择是错误的，你不需要#在属性-开始-与选择器的前：

$('#[id^=div_]') 

应该是的，而不是以下：

$('[id^=div_]') 
$('div[id^=div_]') 

此外，您可以对整个集合应用点击处理程序，这里不需要每个（）。例如：

$('div[id^=div_]').click(function(){ 
    var id = this.id.split("_").pop(); 
    $("#div_body_"+id).slideToggle("slow"); 
}); 

Answer 2

为什么不使用活动函数并选择使用类？这样，您就可以动态地添加用ajax任意数量的元素，然后采取相同的行为自动：

<div id="div_1" class="outer"> 
    <div class="body"> 
    </div> 
</div> 

<div id="div_2" class="outer"> 
    <div class="body"> 
    </div> 
</div> 

<div id="div_3" class="outer"> 
    <div class="body"> 
    </div> 
</div> 

然后使用：

$(function() { 
    $('.outer').live("click" function() { 
     $(this).find('.body').slideToggle("slow"); 
    }); 
});