Question

我有一个包含大量培训课程的JS对象：每个类别都有多个培训课程，每个课程都属于一个类别。

我已经能够将每个类别的描述和标题呈现为模态。例如，通过单击“动物” div上的标题为“动物”的模式，并显示其描述，然后单击不同的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 -->

Answer 1

我添加了模态代码，每次在显示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>

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

控制台：

模式：

1 个答案: