Question

我在收到JSON后立即将Collapsible插入HTML并将信息添加到HTML中。

但是Collapsible没有打开，它只会在HTML本身插入相同内容时打开，但我不能离开它，因为我必须从JSON生成结果，从而为每个对象创建可折叠的内容。

JAVASCRIPT：

function GeneratePeoples__(objJSON){
  for(cat in objJSON.categories){
    document.getElementById('peoples-information').innerHTML +=
    '<ul class="collapsible" data-collapsible="accordion">' +
      '<li>' +
        '<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>People ('+ cat +')</strong></div>' +
        '<div class="collapsible-body white">' +
          '<ul class="collection">' +
            '<li class="collection-item avatar">' +
              '<i class="fa fa-male circle blue" aria-hidden="true"></i>' +
              '<span class="title title-collection-content-information">Type of Categories</span>' +
              '<p><strong>'+ objJSON.categories[cat].name +'</strong></p>' +
              '<a href="#!" class="secondary-content">' +
                '<span class="new black badge" data-badge-caption=" "><strong>+ objJSON.categories[cat].score + '%' +</strong></span>' +
                '<span class="new black badge" data-badge-caption=" "><strong>Score</strong></span>' +
              '</a>' +
            '</li>' +
          '</ul>' +
        '</div>' +
      '</li>' +
    '</ul>';
  }
};

HTML

<div id="peoples-information"></div>

Answer 1

工作：

function GenerateCelebrities__(objJSON){
      for(cat in objJSON.categories){
        for(cel in objJSON.categories[cat].detail.celebrities){
          document.getElementById('celebrities-information').innerHTML +=
          '<ul class="collapsible" data-collapsible="accordion">' +
            '<li>' +
              '<div class="collapsible-header"><i class="fa fa-id-card-o" aria-hidden="true"></i><strong>Celebrity ('+ cap++ +')</strong></div>' +
              '<div class="collapsible-body white">' +
                '<ul class="collection">' +
                  '<li class="collection-item avatar">' +
                    '<i class="fa fa-star circle yellow-text myDiv" aria-hidden="true"></i>' +
                    '<span class="title title-collection-content-information">Celebrity Name</span>' +
                    '<p><strong>'+ objJSON.categories[cat].detail.celebrities[cel].name +'</strong></p>' +
                    '<a href="#!" class="secondary-content">' +
                      '<span class="new black badge" data-badge-caption=" "><strong>'+ objJSON.categories[cat].detail.celebrities[cel].confidence +" %" +'</strong></span>' +
                      '<span class="new black badge" data-badge-caption=" "><strong>Confidence</strong></span>' +
                    '</a>' +
                  '</li>' +
                '</ul>' +
              '</div>' +
            '</li>' +
          '</ul>';
        }
      }
        $(document).ready(function(){
        $('.collapsible').collapsible();
      });

};

物化可折叠不要使用Javascript

1 个答案: