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变量是我使用div解析并放入标识为$p("#panel")的{{1}}的JSON数据。

然后我需要为每个append()动态创建一个flip_sector_" + sector。但我无法在

中创建相同的ID

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

}）;

你能帮助我吗？

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

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

1 个答案: