javascript - 在循环中生成事件处理程序

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 数据，我使用 append 解析并放入 id 为 $p("#panel") 的 div 中()。

然后我需要为每个flip_sector_"+部门动态创建一个slideToggle()。但是我无法在

中创建相同的id

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_"+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 代码。