产生一个循环

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代码。