jquery - 使用 Ajax 调用中的数据创建动态 Bootstrap 4 Accordion

Question

我正在尝试创建 Bootstrap 4 Accordion。我正在使用 Ajax 调用来获取数据，并且数据已正确记录到控制台。我想做一个 ForEach 循环，并为 JSONP 数据集中返回的每个专辑将一张新卡附加到 Accordion。

我遇到的问题:HTML 首先加载，然后我收到数据，然后什么也没有发生， Accordion 不渲染。

所有数据准备好后如何加载 Accordion ？

相关 HTML(艺术家 ID 是一个整数):

<div id="discogAccordion">                        

  <script type="text/javascript">
      let url = 'https://api.deezer.com/artist/' + {{ artist_id }} +'/albums?output=jsonp';
  </script>

  <script type="text/javascript" src="{% static "js/tracklist.js" %}">
  </script>
</div>

相关JS(js/tracklist.js):

$(function () {
$.ajax({
    url: url,
    type: 'GET',
    jsonp: 'callback',
    dataType: 'jsonp',
    crossDomain: true,
    success: function (data) {
        console.log('all data: ', data);
        albumAccordion(data);
    },
    error: function (x, y, z) {
        console.log('x', x);
        console.log('y', y);
        console.log('z', z);
    }
});
});

let albumAccordion = function (data) {
    data.data.forEach(function (item, index) {
    console.log(item, index);
    return $('.discogAccordion').append(

        '<div class="card">'+
            '<div class="card-header" id="heading'+ index +'">'+
                '<h5 class="mb-0">'+
                    '<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse'+ index +'"'+
                            ' aria-expanded="false" aria-controls="collapse'+ index +'">'+
                        'enim eiusmod high life accusamus terry '+
                    '</button>'+
                '</h5>'+
            '</div>'+

            '<div id="collapse'+ index +'" class="collapse" aria-labelledby="heading'+ index +'" data-parent="#discogAccordion">'+
                '<div class="card-body">'+
                    'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf'+
                '</div>'+
            '</div>'+
        '</div>'
    );
});
};

Answer 1

问题在于该函数选择了类名 .discogAccordion ，但是你的 Accordion 容器有 <div id="discogAccordion"> 。所以，选择 Accordion 容器的正确方法是$('#discogAccordion') ...

Demo on Codeply

let albumAccordion = function (data) {
    data.data.forEach(function (item, index) {
    console.log(item, index);
    $('#discogAccordion').append(
        '<div class="card">'+
            '<div class="card-header" id="heading'+ index +'">'+
                '<h5 class="mb-0">'+
                    '<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse'+ index +'"'+
                            ' aria-expanded="false" aria-controls="collapse'+ index +'">'+
                        item.title+
                    '</button>'+
                '</h5>'+
            '</div>'+

            '<div id="collapse'+ index +'" class="collapse" aria-labelledby="heading'+ index +'" data-parent="#discogAccordion">'+
                '<div class="card-body">'+
                    'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf'+
                '</div>'+
            '</div>'+
        '</div>'
    );
});

https://www.codeply.com/go/wr9gjn3Xxg

或者，您可以为 Accordion 指定 <div id="discogAccordion" class="discogAccordion">类名，然后是选择 $('.discogAccordion') 的原始函数会起作用的。