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

HTML CODE

这里我将使用模板格式，它将更容易添加或删除子元素

set.seed(1)
data1 = sample(c(4, 12, 13, 24, 100, 123), 500, replace = TRUE)
data2 = sample(c(4, 12, 13, 24, 100, 123), 500, replace = TRUE)
data <- data.frame(data1,data2)

<强>脚本

<!-- 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>

Answer 2

因为我想避免从不同的服务器调用数据，所以在这里复制数据，这就是它循环的方式

＆＃13;

var jsonData = 
{
	"blocks": [
		{
			"heading": "Section 1",
			"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!"
		},
		{
			"heading": "Section 2",
			"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!"
		},
		{
			"heading": "Section 3",
			"content": "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
		}
	]
};
var json = jsonData.blocks;
  for (var key in json) {
       if (json.hasOwnProperty(key)) {
          console.log(json[key].heading);
          console.log(json[key].content);
       }
    }

＆＃13;

尝试循环访问JSON对象并使用HTML输出它

2 个答案: