将特定的JS obj值附加到模式中

Question

我有七个课程标题显示在各自的div中，单击任何一个div都可以打开一个模式。该模式已硬编码到我的HTML中。

如何将每个课程标题附加到所单击的模式中？例如，通过单击“动物” div，将弹出模式对话框，标题“动物”也应出现。到目前为止，我只能显示第一个标题(Animals)并显示每个模式(Animals,Capitals,Colors,etc)中的每个标题。

JS代码段：

loadCategories(){

    let categs = _categories;

    // using templates to clone a single div based on how many Categories are present
    let $host = $("#host");
        for (var i = 0; i < categs.length; i++) {
           let $template = $("#template").clone();
           $template.find(".cat-box > .cat-title").text(categs[i].Title);
           // $(".modal-title").append(categs[i].Title) // ------- shows everything (must be due to the loop)
           $host.append($template.html());
        }

// wondering if categs[i].Title could be worked with somehow

     $(".modal-title").append(categs.Title)

    let container = document.querySelector("div#template");
        container.innerHTML = $host;

    }

模式：

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

Answer 1

您可以使用简单的javascript从elements属性中获取所需的标题，然后将其添加到模式中。

document.querySelectorAll('.openModal').forEach(el => {
  el.addEventListener('click', function (e) {
    e.preventDefault()
    
    const title = el.getAttribute('data-title')
    
    document.querySelector('.modal').textContent = title
  })
})

<a href="#" class="openModal" data-title="This is the new title">Click me</a>

<br />
<br />

<div class="modal">Pretend this is a modal title</div>