javascript - 单击 div 未打开模式

Question

我有一堆 div，单击其中任何一个都应该打开一个我已硬编码到 html 中的模式。该计划是单击特定类别，模式打开，它显示与该特定类别关联的子类别(培训类(class))。但目前，我最关心的是点击时显示实际的模式。在我的控制台中，我可以看到模式被点击，但其他地方没有迹象表明模式已显示(即它看起来不是 super 小或不可见)。

对此有什么想法吗？

JS 片段:

        // irrelevant code
        ]).then(axios.spread((cat, lib, admn) => {
            _categories = cat.data.d.results;
            _library = lib.data.d.results;

            this.loadCategories();
            this.loadCourses();
        })).catch(error => {
            console.log(error);
        });

    loadCategories(){
        let categs = _categories;

        let htmlElems = "";
            for (var i = 0; i < categs.length; i++) {
                htmlElems += "<div class='cat-box cat-num-" + i + "'>" + categs[i].Title + "</div>";
            }

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

    }

    loadCourses(){ // Training Library

        let crs = _library
            .map(x => {
                return x.Title;
            }).sort();

        this.populateCategory(crs, "div.top-training");
    }

    populateCategory(arrObj, parentTarget){
        arrObj = arrObj.filter((v, p) => arrObj.indexOf(v) == p);

        $.each(arrObj, function(idx, val) {

            let targetDiv = $(parentTarget).hasClass(".cat-box");


            let modalTrigger = $('<div />', {
                'class': 'cat-box',
                'data-category': val,
                'data-target': '#modal-id',
                'data-toggle': 'modal',
                'text': val
            });

            targetDiv.append(modalTrigger);
       // irrelevant code here
        });
    }

index.js

import AllCoursesComponent from './path/allCourses';

let allComp = new AllCoursesComponent();

$(document).on("click", '.cat-box', function(val) {
    console.log('.cat-box clicked')
    let cat  = $(this).data('category')

    $(".training-titles-ul").empty();
    let titles = allComp.getPayload().filter(x => x.Title === cat);

});

HTML:

<div class="top-training"></div>

<!----- Modal ----->
    <div class="modal" id="modal-id" role="dialog">
      <div class="modal-dialog" role="document">
       <!-- modal stuff here -->   
      </div> 
    </div> 

Answer 1

以下是如何根据您的情况切换引导模式的示例

<div class="top-training" id="traning1" data-toggle="modal" data-target="#modal-id">Here</div>

<!----- Modal ----->
    <div class="modal" id="modal-id" role="dialog">
      <div class="modal-dialog" role="document">
       <!-- modal stuff here -->   
       here
      </div> 
    </div> 

为了处理需要传递到该模式的动态数据，我可能会将一个事件处理程序附加到每个设置模式内容的 div。示例:

$('#traning1').on('click',function(){
   $("#someIdForModalContent").text('I am some content.');
});