从URL获取JSON，然后使用Javascript以手风琴的形式显示结果

我已经创建了一个手风琴，我想通过以下链接使用JSON填充它：

这是我的html：

    <div class="accordion js-accordion">
        <div class="accordion__item js-accordion-item active">
            <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body" >
                <div class="accordion-body__contents" ></div>
            </div><!-- end of accordion body -->
        </div><!-- end of accordion item -->

    <div class="accordion__item js-accordion-item ">
        <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents"></div>
            </div>
        </div>

    <div class="accordion__item js-accordion-item">
        <div class="accordion-header js-accordion-header"></div> 
            <div class="accordion-body js-accordion-body">
                <div class="accordion-body__contents"></div>
            </div>
        </div>
    </div><!-- end of accordion -->

我试图用JSON文件中的“heading”数据填充accordion header js accordion headerdiv，并用“contents”数据填充accordion-body\u contents

这就是我对Javascript部分的了解：

$.ajax({
url: 'http://design.propcom.co.uk/buildtest/accordion-data.json',   
type: 'GET',
dataType: 'JSON',
success: function (data) {
   $.each(data.blocks, function(index, element) {
   $(".accordion-header").append("<div>" + element.heading + "</div>");
   $(".accordion-body__contents").append("<div>" + element.content + "</div>");
    });
}

$.ajax({
网址：'http://design.propcom.co.uk/buildtest/accordion-data.json',   
键入：“GET”，
数据类型：“JSON”，
成功：功能（数据）{
$.each（数据块、函数（索引、元素）{
$（“.accordion头”）.append（“+element.heading+”）；
$（“.accordion-body\uu contents”）。追加（“+element.content+”）；
});
}

}))

---

任何帮助都将不胜感激，因为我觉得我目前的努力已经碰壁了

这里有几个问题：

我们在处理AJAX结果时有点不对劲

• 使用

  数据块

  属性，循环时使用

  元素

  变量

正如@Danny建议的，我们有额外的AJAX属性

• 删除

  回调

  和

  数据

  属性

最后，您的html似乎过于复杂

• 在从您的演示站点看到css后，我能够将其包括在内，并删除我所认为的jQueryu。现在，请确保附加整个

  accordion\u项目

  元素

解决了这些问题后，应该类似于：

$.ajax({
网址：'https://design.propcom.co.uk/buildtest/accordion-data.json',
键入：“GET”，
数据类型：“JSON”，
成功：功能（数据）{
$.each（数据块、函数（索引、元素）{
$（“手风琴”）
.附加(`
${element.heading}
${element.content}
`);
});
var accordion=（函数（）{
var$accordion=$（'.js accordion'）；
var$accordion_header=$accordion.find（'.js accordion header'）；
var$accordion_item=$（'.js accordion item'）；
//默认设置
变量设置={
//动画速度
速度:400,，
//如果为true，则关闭所有其他手风琴项目
oneOpen:错误
};
返回{
//传递可配置对象文本
初始化：函数（$settings）{
$accordion_header.on（'click'，function（）{
手风琴.拨动（$（此））；
});
$.extend（设置，$settings）；
//如果oneOpen为true，请确保只有一个手风琴处于活动状态
如果（settings.oneOpen&&$（'.js accordion item.active'）。长度>1）{
$（'.js accordion item.active:not（：first））.removeClass（'active'）；
}
//展示手风琴的主体
$（'.js accordion item.active'）.find（'>.js accordion body'）.show（）；
},
切换：函数（$this）{
如果（settings.oneOpen&&$this[0]！=$this.closest（'.js accordion'）.find（'>.js-accordion-item.active>.js accordion header'）[0]）{
$this.closest（“.js accordion”）
.find（“>.js手风琴项目”）
.removeClass（'活动'）
.find（“.js手风琴体”）
.slideUp（）
}
//显示/隐藏单击的手风琴项目
$this.closest（'.js accordion item'）.toggleClass（'active'）；
$this.next（）.stop（）.slideToggle（设置.速度）；
}
}
})();
$（document.ready（function（）{accordion.init（{speed:300，oneOpen:true}）；}）；
}
});
正文{
字体大小：62.5%；
背景：#ffffff；
字体系列：“开放式Sans”，无衬线；
线高：2；
填充物：5em；
}
.手风琴{
字号：1rem；
宽度：30vw；
保证金：0自动；
边界半径：5px；
}
.手风琴头，
.手风琴琴体{
背景：白色；
}
.手风琴头{
填充：1.5em 1.5em；
边缘底部：6px；
盒影：0px 4px#6F277D；
背景#9E38B0；
文本转换：大写；
颜色：白色；
光标：指针；
字体大小：.8em；
字母间距：.1米；
过渡：全部3秒；
}
.手风琴头：悬停{
背景：#6844B7；
盒影：0px 4px#4C3185；
位置：相对位置；
z指数：5；
}
.手风琴琴体{
背景:#fcfc；
颜色：#3f3c3c；
显示：无；
}
.手风琴-主体内容{
填充：1.5em 1.5em；
字体大小：.85em；
}
.accordion\u项目。活动：最后一个子项。accordion标题{
边界半径：无；
}
.accordion:first child>.accordion\u item>.accordion头{
边框底部：1px实心透明；
}
.accordion\uu项目>.accordion标题：之后{
内容：“\f3d0”；
字体系列：图标；
字体大小：1.2米；
浮动：对；
位置：相对位置；
顶部：-2px；
过渡期：3s全部；
变换：旋转（0度）；
}
.accordion\uu item.active>。accordion标题：之后{
变换：旋转（-180度）；
}
.accordion\u项目。活动。accordion标题{
背景：#6844B7；
盒影：0px 4px#4C3185；
}
.手风琴项目.手风琴项目.手风琴标题{
背景#f1f1；
颜色：黑色；
}
@媒体屏幕和屏幕（最大宽度：1000px）{
身体{
填充：1em；
}
.手风琴{
宽度：100%；
}
}身体{
字体大小：62.5%；
背景：#ffffff；
字体系列：“开放式Sans”，无衬线；
线高：2；
填充物：5em；
}
.手风琴{
字号：1rem；
宽度：30vw；
保证金：0自动；
边界半径：5px；
}
.手风琴头，
.手风琴琴体{
背景：白色；
}
.手风琴头{
填充：1.5em 1.5em；
边缘底部：6px；
盒影：0px 4px#6F277D；
背景#9E38B0；
文本转换：大写；
颜色：白色；
光标：指针；
字体大小：.8em；
字母间距：.1米；
过渡：全部。3s