嘗試通過JSON對象循環並使用HTML輸出它

Question

我想循環通過this JSON數據並將數據輸出到像這樣的手風琴： http://alexthorpe.com/wp-content/uploads/2012/01/accordion_with_css.jpg但它不起作用。

這是我到目前爲止有：
HTML：

<div class="accordion"> 
      <div class="slide"> 
       <h3></h3> 
       <div class="accordion-info"> 
       </div> 
      </div> 
</div> 

JS：

$(document).ready(function() { 
    $('div.accordion-info').hide(); 
    $('.slide > h3').click(function() { 
     $(this).next().slideToggle('fast'); 
     $(this).toggleClass('active'); 
    }); 
}); 

$(document).ready(function() { 
    $.getJSON('http://design.propcom.co.uk/buildtest/accordion-data.json', function(data) { 
     $.each(data, function(index) { 
      console.log(data); 
     }); 
    }); 

}); 

這是codepen。

Answer 1

因爲我想避免從不同的服務器調用數據，這裏複製的數據，這是怎麼循環

var jsonData = 
 
{ 
 
\t "blocks": [ 
 
\t \t { 
 
\t \t \t "heading": "Section 1", 
 
\t \t \t "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis!" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "heading": "Section 2", 
 
\t \t \t "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sed aliquam vitae fugit odit voluptate eligendi, blanditiis quasi nobis reiciendis! Rem maiores reprehenderit animi aliquam inventore vel adipisci delectus itaque!" 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "heading": "Section 3", 
 
\t \t \t "content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
 
\t \t } 
 
\t ] 
 
}; 
 
var json = jsonData.blocks; 
 
    for (var key in json) { 
 
     if (json.hasOwnProperty(key)) { 
 
      console.log(json[key].heading); 
 
      console.log(json[key].content); 
 
     } 
 
    } 
 
    
 

Answer 2

HTML代碼

在這裏，我將使用模板格式，將更容易添加或刪除子元素

<!-- Display Accordion --> 
<div> 
    <h1>Jquery Accordion</h1> 
    <div class="accordion"></div> 
</div> 
<!-- Template for each slide item --> 
<div rel="template"> 
    <div class="block"> 
     <h3 class="heading"></h3> 
     <div class="content"></div> 
    </div> 
</div> 

腳本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
$(function() { 
    $.getJSON('http://design.propcom.co.uk/buildtest/accordion-data.json', function(data) { 
     // To empty the existing item 
     // $('.accordion').empty(); 

     // Iterate block 
     $.each(data.blocks, function(k, v) { 
      // Make use of jquery clone 
      var new_block = $('[rel=template]').find('.block').clone(); 
      new_block.find(".heading").html(v['heading']); 
      new_block.find(".content").html(v['content']); 

      // Append the each item 
      $('.accordion').append(new_block) 
     }); 
    }); 

});