產生一個循環

Question

我寫了這樣的代碼的事件處理程序：

for (i = 0; i < html.length; i++) { 
    $p("#panel").append("<div id='flip_sector_"+section+"' style='padding: 5px;text-align: left;background-color: white;'>"+html[i].sector_name+"</div><div id='panel_sectors_"+section+"' style='padding:5px;text-align: left;background-color:white;display: none;'>sectors</div>"); 
    // $p("#flip_sector_"+html[i].id+"").click(function(){ 
    // $p("#panel_sectors_"+html[i].id+"").slideToggle("slow");}); 
    // console.log(html[i].id); 
    section++; 
    console.log(section); 
} 

var sectionJs = 0; 
// for (i = 0; i < html.length; i++) { 
    $p("#flip_sector_" + sectionJs + "").click(function() { 
    $p("#panel_sectors_" + sectionJs + "").slideToggle("slow"); 
    sectionJs++; 
    }); 
    // console.log(html[i].id); 
// } 

在這段代碼中我使用AJAX JSON後端得到。 html變量是JSON數據，我解析並放入div與編號$p("#panel")使用append()。

然後我需要爲每個flip_sector_" + sector動態創建一個slideToggle()。但我不能在

append("<div id='flip_sector_" + section + "' style='padding: 5px;text-align: left;background-color: white;'>" + html[i].sector_name + "</div><div id='panel_sectors_" + section + "' style='padding:5px;text-align: left;background-color:white;display: none;'>sectors</div>") 

創建相同的ID和

$p("#flip_sector_"+sectionJs+"").click(function(){ 
    $p("#panel_sectors_"+sectionJs+"").slideToggle("slow");sectionJs++; 

}）;

你能幫我嗎？

Answer 1

您試圖通過增量id屬性嘗試執行此操作的方式是反模式。

一個更好的解決方案是使用所有元素上的公共類將它們分組到單個事件處理程序中。然後可以使用DOM遍歷來查找相關元素。試試這個：

var $p = jQuery; 
 
var html = [ 
 
    { sector_name: 'foo' }, 
 
    { sector_name: 'bar' }, 
 
    { sector_name: 'fizz' } 
 
]; 
 

 
for (i = 0; i < html.length; i++) { 
 
    $p("#panel").append('<div class="flip_sector">' + html[i].sector_name + '</div><div class="panel_sector">sectors</div>'); 
 
} 
 

 
$p(".flip_sector").click(function() { 
 
    $p(this).next('.panel_sector').slideToggle("slow"); 
 
});

.flip_sector { 
 
    padding: 5px; 
 
    text-align: left; 
 
    background-color: white; 
 
} 
 

 
.panel_sector { 
 
    padding: 5px; 
 
    text-align: left; 
 
    background-color: white; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="panel"></div>

還要注意在CSS中使用的類的移動樣式規則出的HTML代碼。