@winers
Начинающий программист

Как сгенирировать информацию из тега h3 в тег h5 с помощью 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'
  }

именно с этими данными, последними из массива. А очень хочется чтобы отображался заголовок для каждого открытого видео соответствующий этому видео.
замучался уже, помогите люди добрые.
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
hzzzzl
@hzzzzl
не уверен про синтаксис jquery, но как-то так?

var button = $(e.relatedTarget);

h3 = button.parent().find('h3').text() // текст h3
modal.find('h5').text(h3) // текст h5 в модале
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Megas
@Megas
1) Добавьте в кнопку еще один атрибут:
data-title="${title}"

2) А в хендлер на нажатие добавьте строчку
modal.find('h5.modal-title').textContent = button.data("title");
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы