无法将元素动态插入 Semantic-UI Accordion

如何解决无法将元素动态插入 Semantic-UI Accordion

我正在尝试在 Semantic-UI Accordion 中插入动态内容。基本上，我必须将 JSON 输入作为手风琴呈现给 html。

这是我用于上述目的的脚本和 html:-

<script language='javascript'>

  $(document).ready(function(){
  
     $('.ui.accordion').accordion();
     
     $('.ui.accordion').accordion({onopen: function() { // function for dynamically inserting content inside clicked element in accordion
      var id = $(this).attr('id'); //gets the id of the clicked element in accordion
      var obj = find_key_value(json_data,id); // a function for finding the key in the json and its corresponding value
      for (var prop in obj){ //appends new content inside the clicked element in the accordion
        $(`#${id}`).append(`
        <div class="title">
        <i class="dropdown icon"></i>
          ${prop}
        <div class="content"></div>
        `);
        $('.ui.accordion').accordion('refresh');   
            }
          }
        });
      });
    </script>

<div class="ui styled accordion">
  <div class="title">
    <i class="dropdown icon"></i>
    A
  </div>
  <div class="content" id="A"></div>
  <div class="title">
    <i class="dropdown icon"></i>
    B
  </div>
  <div class="content" id="B"></div>
  <div class="title">
    <i class="dropdown icon"></i>
    C
  </div>
  <div class="content" id="C"></div>
</div>

同样在上面的脚本中，我使用 onopen 回调用于手风琴，用于在元素打开后执行一些操作，如 Semantic-UI Docs

假设json_data如下：-

json_data = {
'A' : {
     'A1':{'A12':[]},'A2': [],'A3': [],},'B' :  {
     'B1':[],'B2': [],'B3': {'B31':[]},'C' : {
     'C1':[]
      }
}

如果A被点击，则A1、A2、A3应该被动态插入到{{1 }} 内容，A's 和 B 以及 C 等嵌套对象类似。因此，只有当对象对应的键被点击或打开。

Semantic-UI 上没有太多相关文档，我上面分享的代码不起作用。知道如何做到这一点吗？

[编辑：此 JSON 是从 Python 字典创建的，因此它可能看起来不像常规的 JSON]

解决方法

obj.forEach((v,i,a)=>{ //appends new content inside the clicked element in the accordion
    $(`${id}`).append(`
        <div class="title">
        <i class="dropdown icon"></i>
          ${a[i]}
        <div class="content"></div>
        `);
        $('.ui.accordion').accordion('refresh');   
})

,

不是在手风琴打开时创建 html，而是在页面加载时创建整个结构。因此，首先循环遍历外部数组即：A,B,C 然后检查里面的数据假设 A 是 object {} 还是 array [] 取决于这一点，您需要更改逻辑并附加整个html 在你的 dom 中。

演示代码：

$(document).ready(function() {
  var json_data = {
    'A': [{
      'A1': {
        'A12': ["A12a"],'A13': ["A13a"]
      },'A2': ["az"],'A3': ["a3"],}],'B': [{
      'B1': ["b1"],'B2': ["b2"],'B3': {
        'B31': ["b31"]
      },'C': [{
      'C1': ["c1"]
    }]
  }
  var html = "";
  $.each(json_data,function(key,value) {
    //creating title for outer array
    html += `<div class="title">
        <i class="dropdown icon"></i> ${key}
      </div> <div class="content" id="${key}"><div class="accordion">`
    //child inside A,C( A1,A2..etc)
    $.each(value[0],function(k,v) {
      html += `<div class="title">
          <i class="dropdown icon"></i>
         ${k}
      </div>`
      //check if the value of object is {} or []
      if (Object.prototype.toString.call(v) === '[object Object]') {
        html += `<div class="content"><div class="accordion">`
        //i.e : A1 { A12,A13}
        for (var i = 0; i < Object.keys(v).length; i++) {
          html += `<div class="title">
          <i class="dropdown icon"></i>
         ${Object.keys(v)[i]}</div>`
          //loop through i.e : A12 :[""]
          $.each(v[Object.keys(v)[i]],function(ky,vl) {
            html += `<div class="content">${vl}</div>`
          })
        }
        html += `</div></div>`
      } else if (Object.prototype.toString.call(v) === '[object Array]') {
        //simply get content []
        html += `<div class="content">`
        $.each(v,vl) {
          html += `${vl}`
        })
        html += `</div>`
      }
    })
    html += `</div></div>`

  })

  $("#outer").html(html) //add to outer div
  $('.ui.accordion').accordion(); //intialzie


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous"></script>
<div class="ui styled accordion" id="outer">
</div>