Добавление конкретного значения JS obj в модальное - PullRequest
Новая
       14

Добавление конкретного значения JS obj в модальное

0 голосов
/ 01 мая 2019

У меня есть семь названий курсов, которые отображаются в их собственных разделах, и нажатие на любой из разделов открывает модальное окно. Модал был жестко запрограммирован в моем HTML.

Как я могу добавить название каждого курса в модал, по которому щелкнули? Например, при нажатии на раздел «Животные» появляется модальное окно с названием «Животные». До сих пор я мог только показать первый заголовок (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;

    }

Modal: 

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

1 Ответ

0 голосов
/ 01 мая 2019

Вы можете использовать простой javascript, чтобы получить нужный заголовок из атрибутов элементов, а затем добавить их в модал. 

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