我正在嘗試構(gòu)建一個代碼片段 html 頁面，我正在使用 bootstrap 框架。我的代碼看起來像打擊超文本標(biāo)記語言<div class="col-lg-4 col-md-4 col-sm-4"> <div class="list-container"> <ul class="list-group list-group-flush" id="snippets"> <h3 class="list-group-item-heading">Code Snippets</h3> </ul> </div></div>JS代碼<script> $( document ).ready( function () { for ( var index = 0; index < snippets.length; index++ ) { $( "#snippets" ).append( '<li class="list-group-item"> <div id="snippet_name" data-toggle="collapse" data-target="#codesnippet">' + snippets[index].Name + '</div> <div id="codesnippet" class="collapse codesnippet javascript">' + '<pre><code class="javascript">' + snippets[index].Code + '</code></pre></li>' ); } } );</script>我不確定我在這里缺少什么。第二行折疊在這里沒有按預(yù)期工作。例如，如果我有兩個具有以下結(jié)構(gòu)的片段[ { "name" : "alert", "code" : "alert('message')" , }, { "name" : "console", "code" : "console.log(message)", }]我得到兩行 asalert和console。當(dāng)我單擊alert它的折疊并顯示alert('message')代碼時，但是當(dāng)我單擊 時console，我看不到它的代碼。但是當(dāng)我檢查console部分時，我可以看到該代碼，并且還可以毫無問題地打印該對象。任何建議都非常感激。
1 回答
繁星點點滴滴
TA貢獻(xiàn)1803條經(jīng)驗 獲得超3個贊
由于您使用循環(huán)創(chuàng)建<li>元素for，因此必須使每個id元素都是唯一的。一種方法是將循環(huán)index中的值附加for到id.
此外，您使用大寫字母表示“名稱”和“代碼”，而不是 json 中使用的小寫字母。
最后，您缺少div我在結(jié)束<li>元素之前添加的結(jié)束標(biāo)記。
$( document ).ready( function () {
for ( var index = 0; index < snippets.length; index++ ) {
$( "#snippets" ).append( '<li class="list-group-item"> <div id="snippet_name' + index + '" data-toggle="collapse" data-target="#codesnippet' + index + '">'
+ snippets[index].name + '</div> <div id="codesnippet' + index + '" class="collapse codesnippet javascript">'
+ '<pre><code class="javascript">'
+ snippets[index].code + '</code></pre></div></li>' );
}
} );
- 1 回答
- 0 關(guān)注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消