Как сгенирировать информацию из тега h3 в тег h5 с помощью js?

Question

[Максим js]

вот код который создает элементы на странице с изображением заголовком и описанием! при нажатии на ссылку с изображением открывается модальное окно и загружается видео.

let app = document.getElementById("app");

projects.forEach(project => {
let title = `${project.title}`;
let subTitle = `${project.subTitle}`;
let src = `${project.src}`;
let poster = `${project.poster}`;

let projectEl = document.createElement("div");
projectEl.classList.add("card");

projectEl.innerHTML =


`<div class="card" style="border:none;">
  <a href="#theModal" class="btn-link"
    data-remote="${src}"
    data-toggle="modal" data-target="#theModal">
      <img  class="rrrrr" src="${poster}" class="card-img-top" alt="...">
  </a>
  <div class="card-body">
    <h3 id="ww">${title}</h3>
    <p class="card-text">${subTitle}</p>
  </div>
</div>`;


$('#theModal').on('show.bs.modal', function (e) {
    var button = $(e.relatedTarget);
    var modal = $(this);
    modal.find('video').attr('src', button.data("remote"));
});

$('body').on('hidden.bs.modal', '.modal', function () {
    $('video').trigger('pause');
});


app.appendChild(projectEl);
});

вот отсюда берутся данные

let projects = [
  {
    title: 'Сказка о Царе Салтане1',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/f1ec3b2a-ff2b-40f7-920e-f4a53b474710-360.mp4',
    poster: 'img/sk-1.jpg'
  },

  {
    title: 'Сказка о Царе Салтане2',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь!',
    src: 'https://video.lewd.host/download/videos/27c68199-f1cc-4e7d-bc21-7c42e731636d-720.mp4',
    poster: 'img/sk-2.jpg'
  },
  {
    title: 'Сказка о Царе Салтане3',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/890590af-82df-4d54-98ec-7181da1946b6-538.mp4',
    poster: 'img/sk-1.jpg'
  },
  {
    title: 'Сказка о Царе Салтане4',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/f1ec3b2a-ff2b-40f7-920e-f4a53b474710-360.mp4',
    poster: 'img/sk-2.jpg'
  },
  {
    title: 'Сказка о Царе Салтане1',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/f1ec3b2a-ff2b-40f7-920e-f4a53b474710-360.mp4',
    poster: 'img/sk-1.jpg'
  },

  {
    title: 'Сказка о Царе Салтане2',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/f1ec3b2a-ff2b-40f7-920e-f4a53b474710-360.mp4',
    poster: 'img/sk-2.jpg'
  },
  {
    title: 'Сказка о Царе Салтане3',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/8f9844d9-915a-4eac-90be-a25fd2e29d5c-538.mp4',
    poster: 'img/sk-1.jpg'
  },
  {
    title: 'Сказка о Царе Салтане4',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/e951008c-bd98-4fad-8e8f-c3103469639f-720.mp4',
    poster: 'img/sk-2.jpg'
  }
];

вот код модального окна

<!-- Modal -->
  <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel"></h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                <video width="465" height="315" src=""  autoplay controls ></video>
              </div>
              <div class="modal-footer">
                <p class="modal-footer-text"></p>
              </div>
          </div>
      </div>
  </div>

как засунуть в открывшееся модальное окно такой же заголовок ? отсюда <h3 id="ww">${title}</h3>

сюда ->

<h5 class="modal-title" id="exampleModalLabel"></h5>

пытался сделать вот так

let md = document.querySelector(".ww");
let de = document.querySelector(".modal-title").textContent = `${title}`;
let dq = document.querySelector(".modal-title").innerHTML = `${title}`;

но таким способом в любом открытом модальном окне отображается заголовок

{
    title: 'Сказка о Царе Салтане4',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/e951008c-bd98-4fad-8e8f-c3103469639f-720.mp4',
    poster: 'img/sk-2.jpg'
  }

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

Answer 1

[hzzzzl]

не уверен про синтаксис jquery, но как-то так?

var button = $(e.relatedTarget);

h3 = button.parent().find('h3').text() // текст h3
modal.find('h5').text(h3) // текст h5 в модале

Comments

[Максим js]

Спасибо большое!)

Answer 2

[Megas]

1) Добавьте в кнопку еще один атрибут:
data-title="${title}"

2) А в хендлер на нажатие добавьте строчку

modal.find('h5.modal-title').textContent = button.data("title");

Comments

[Максим js]

в какую кнопку?

[Megas]

Максим js, Имелась в виду ссылка по которой открывается модальное окно