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"); 
    }); 
});