尝试通过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) 
     }); 
    }); 

});