Question

にイベントハンドラを生成します。私はAJAX JSONを使用してバックエンドから取得このコードで

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

を。 html変数は、私が解析してdivのIDが$p("#panel")であるappend()を使用するJSONデータです。

次に、私はそれぞれ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>

はまた、HTMLコードのうち、スタイリング・ルールを移動するためにCSSのクラスの使用を注意してください。