时间戳

首页 > 解决方案 > 将 JS obj 值附加到动态创建的模式中

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

问题描述

我有一个 JS 对象，其中包含一堆培训课程：每个类别都有多个培训课程，每个课程都属于一个类别。

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

我正在尝试将每个培训课程加载到每个模式中，但基于我如何呈现每个类别 div 我遇到了问题，即类别的描述和标题来自一个JS 对象（_categories）和培训课程来自一个单独的JS 对象 ( _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);

}

安慰：

[对象数组] [对象 {...}，对象 {...}，...等 0 标题“布鲁克林”

模态：

     <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 -->

标签： javascriptjqueryhtmlobjectfor-loop

解决方案

我添加了模态代码，并且每次在 show 之前show.bs.modal，文本都在变化。

此外，我添加了一个计数器i，因此当模态隐藏hide.bs.modal增加以显示键值数组的下一个元素时。

检查我的例子。

  var i=0;
      $(document).ready(function(){
	    
	    $("#btn1").click(function(){
		   
		   var myArray = { 0:{description:'desc1' , title: 'title 1'},1:{description:'desc 2' , title: 'title 2'} };
		   
		   $("#exampleModal").on("show.bs.modal",function(){
		      $("#exampleModal").find('.modal-body').html("<p>"+myArray[i].description+"</p>");
			  $("#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'); } });
		   
		   $("#exampleModal").modal();
		   
		});
	  });
	  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button id="btn1">Button 1</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Default text</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

推荐阅读