Javascript 将JS obj值附加到动态创建的模式中

我有一个JS对象，它包含一组培训课程：每个类别都有多个培训课程，每个课程都属于一个类别

我已经能够将每个类别的描述和标题呈现为模态。例如，通过单击“动物”分区，将显示一个名为“动物”的模式及其描述，然后单击不同的分区加载不同的信息

我试图将每个培训课程加载到每个模式中，但基于我呈现每个类别div的方式，我遇到了问题，即类别的描述和标题来自一个JS对象（

\u categories

），培训课程来自一个单独的JS对象（

\u library

）

根据我在下面使用

catBoxElems+=

所做的工作，是否可以将每个培训课程附加到每个模式中？或者我必须将课程附加到循环之外

loadCategories(){

        let categs = _categories,
            libCrs = _library

        console.log(libCrs);

      // libCrs[i].Title only shows the first course in the first category div, the second course in the second category div, etc.
            let catBoxElems = "";
                for (var i = 0; i < categs.length; i++) {
                    catBoxElems += 
                    "<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal' data-desc='" + categs[i].Description + "'data-title='" + categs[i].Title + "'data-crs='" + libCrs[i].Title + "'>" + catPic + "<br>" + categs[i].Title + "</div>";
                } 

           $(document).find("#modal-id").off("shown.bs.modal").on("shown.bs.modal", function(e) {
                $(document).find(".modal-title").html($(e.relatedTarget).data("title"));
                $(document).find(".category-desc").html($(e.relatedTarget).data("desc"));
                $(document).find(".training-titles-ul").html($(e.relatedTarget).data("crs"));
            }).on("hidden.bs.modal", function(e) {
                $(document).find(".modal-title").html("");
            });

      let container = document.querySelector("div.top-training");
        container.innerHTML = catBoxElems;
        console.log(container);

}

loadCategories（）{
设categs=\u类别，
图书馆
控制台日志（libCrs）；
//libCrs[i]。标题仅显示第一类div中的第一个课程，第二类div中的第二个课程，等等。
让catBoxElems=“”；
对于（变量i=0；i“+catgs[i].标题+”；
} 
$（document.find（“#modal id”）.off（“.displaw.bs.modal”）.on（“.displaw.bs.modal”），函数（e）{
$（文档）.find（“.modal title”）.html（$（e.relatedTarget）.data（“title”））；
$（文档）.find（“.category desc”）.html（$（e.relatedTarget）.data（“desc”））；
$（文档）.find（“.training titles ul”）.html（$（e.relatedTarget）.data（“crs”））；
}).on（“隐藏的.bs.modal”，功能（e）{
$（document.find（“.modal title”）.html（“”）；
});
让容器=document.querySelector（“div.top-training”）；
container.innerHTML=catBoxElems；
控制台日志（容器）；
}

慰问： [对象数组][对象{…}，对象{…}，…等 0 标题“布鲁克林”

情态动词：

&时代；

我添加了模式代码，每次在show

show.bs.modal

之前，文本都在更改

此外，我还添加了一个计数器

i

，因此当modal隐藏

hide.bs时，modal

将递增以显示键值数组的下一个元素

看看我的例子

var i=0；
$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
var myArray={0:{description:'desc1'，title:'title 1'}，1:{description:'desc 2'，title:'title 2'}；
$（“#exampleModal”）。在（“show.bs.modal”，function（）上{
$（“#exampleModal”）.find（“.modal body”）.html（“”+myArray[i].description+”
”）；
$（“#exampleModal”）.find（“.modal title”）.text（myArray[i].title）；
});
$（“#exampleModal”）.on（“hide.bs.modal”，function（）{i++；if（i==Object.keys（myArray）.length）{$（'btn1'）.attr（'disabled'，'disabled'）；}）；
$（“#示例模态”）.modal（）；
});
})；

按钮1
情态标题
&时代；
默认文本

接近
保存更改

我添加了模式代码，每次在show

show.bs.modal

之前，文本都在更改

此外，我还添加了一个计数器

i

，因此当modal隐藏

hide.bs时，modal

将递增以显示键值数组的下一个元素

看看我的例子

var i=0；
$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
var myArray={0:{description:'desc1'，title:'title 1'}，1:{description:'desc 2'，title:'title 2'}；
$（“#exampleModal”）。在（“show.bs.modal”，function（）上{
$（“#exampleModal”）.find（“.modal body”）.html（“”+myArray[i].description+”
”）；
$（“#exampleModal”）.find（“.modal title”）.text（myArray[i].title）；
});
$（“#exampleModal”）.on（“hide.bs.modal”，function（）{i++；if（i==Object.keys（myArray）.length）{$（'btn1'）.attr（'disabled'，'disabled'）；}）；
$（“#示例模态”）.modal（）；
});
})；

按钮1
情态标题
&时代；
默认文本

接近
保存更改

为什么不使用模式代码并每次动态分配类别详细信息？@MariosNikolaou您的意思是为模式设置

数据属性

？我不知道您的意思。您将使用模式html代码并在显示之前分配所需的文本。您希望每次都创建新的模式代码吗？还是希望有一个模式和e每次更改文本？我希望只有一个模式，文本每次都会更改。为什么不使用模式代码，每次动态分配类别详细信息？@MariosNikolaou您的意思是为模式设置

数据属性

？我不知道您的意思。您将使用模式html代码，然后在显示之前分配所需的文本。是否你想每次都创建新的模态代码？或者你想有一个模态，每次都改变文本？我宁愿只有一个模态，每次都改变文本。

     <div class="modal" id="modal-id" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-backdrop">
          <div class="modal-content"> 

            <a class="close" data-dismiss="modal" aria-label="Close">
              <span class="x-close" aria-hidden="true">&times;</span>
            </a>

            <div class="modal-img"></div>

            <div class="modal-title" id="exampleModalLabel"></div>

            <div class="modal-body">
              <div class="category-desc"></div>
              <div class="training-titles">
                <ul class="training-titles-ul">

                </ul>
              </div>
            </div>

          </div> <!-- modal-content -->
        </div> <!-- modal-backdrop -->