Загрузка различного содержимого в модальное поле с помощью одного файла JavaScript

ProgramBox

Загрузка различного содержимого в модальное поле с помощью одного файла JavaScript

Post author:admin
Запись опубликована:4 мая, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь использовать один файл javascript для открытия модального поля с различным содержимым в зависимости от того, на что нажимается. Одно модальное поле работает отлично, другие загружают правильный текст, но не любые изображения. Если я удаляю mySlides класса div и просто добавляю изображения в модальное поле, это работает нормально. Я уверен, что это что-то простое, что я упускаю из виду.

 // Get the modal
let modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
let btn = document.getElementsByClassName('text');

// Get the <span> element that closes the modal
let span = document.getElementsByClassName("close");



// When the user click on the button, open the modal
for (let i = 0; i < btn.length; i  ) {
  btn[i].onclick = function() {
    modal[i].style.display = "flex";
  }
}

for (let i = 0; i < span.length; i  ) {
  span[i].onclick = function() {
    modal[i].style.display = "none";
  }
}

let slideIndex = 1;

// Next/previous controls
function plusSlides(n) {
  showSlide(slideIndex = n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlide(slideIndex = n);
}

function showSlide(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
  for (i = 0; i < slides.length; i  ) {
    slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i  ) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className  = " active";
}

showSlide(slideIndex);

 <button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="slideshow-container">
      <!--Full-width images with number and caption text-->
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
      </div>
      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
      </div>
      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="images/checkbook.jpg" class="modal-image" style="width:100%">
      </div>
      <!--Next and previous buttons-->
      <a class="prev" onClick="plusSlides(-1)">amp;#10094;</a>
      <a class="next" onClick="plusSlides(1)">amp;#10095;</a>
    </div>
    <br>
    <!--The dots/circles-->
    <div style="text-align: center">
      <span class="dot" onClick="currentSlide(1)"></span>
      <span class="dot" onClick="currentSlide(2)"></span>
      <span class="dot" onClick="currentSlide(3)"></span>
    </div>
    <h2 id="modal-heading">MyRegister App</h2>
    <p id="modal-text">This app simulates a checkbook register. Add deposits and withdraws.
    </p>
    <span class="close">amp;times;</span>
    <a href="https://github.com/cpickard2790/MyRegisterGUI/tree/master/My Register">Source Code</a>
  </div>
</div>
</div>
<div class="photo-wrap">
  <img src="images/test.jpg" class="portp">
  <button id="myBtn" class="text">Learn More</button>
  <!--Modal-->
  <div id="myModal" class="modal">
    <div class="modal-content">
      <div class="slideshow-container">
        <!--Full-width images with number and caption text-->
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img src="images/practest.png" class="modal-image" style="width:100%">
        </div>
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img src="images/test.jpg" class="modal-image" style="width:100%">
        </div>
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img src="images/practest.png" class="modal-image" style="width:100%">
        </div>
        <!--Next and previous buttons-->
        <a class="prev" onClick="plusSlides(-1)">amp;#10094;</a>
        <a class="next" onClick="plusSlides(1)">amp;#10095;</a>
      </div>
      <br>
      <!--The dots/circles-->
      <div style="text-align: center">
        <span class="dot" onClick="currentSlide(1)"></span>
        <span class="dot" onClick="currentSlide(2)"></span>
        <span class="dot" onClick="currentSlide(3)"></span>
      </div>
      <h2 id="modal-heading">Practice Test App</h2>
      <p id="modal-text">This is a practice test application I made for work.</p>
      <span class="close">amp;times;</span>
      <a href="https://github.com/cpickard2790/MyRegisterGUI/tree/master/My Register">Source Code</a>
    </div>
  </div>
</div>

1. Я не думаю, что текст меняется правильно. Правильно ли это меняется?

2. Да, с моей стороны текст h2 и p изменяется корректно. Это просто картинки внутри mySlides div, которые не будут отображаться в остальных модальных полях, только в первом модальном. Как только я избавляюсь от mySlides divs и просто добавляю картинки в слайд-шоу-контейнер, это работает для каждого модального поля, их просто нет в красивом контейнере со следующей и предыдущей кнопками и т.д..

Ответ №1:

Поскольку изображение не прикреплено. Я не вижу, меняется изображение или нет.
Прочитав ваш код, я понимаю, что вы меняете свои слайды на основе этого HTML-кода.

 <!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1)">amp;#10094;</a>
<a class="next" onClick="plusSlides(1)">amp;#10095;</a>

Но в вашем коде вы не добавляете значение, которое отправляете в plusSlides() функцию.

Итак, вам необходимо внести изменения в вашу plusSlides() функцию следующим образом:

 function plusSlides(n) {
  showSlide(slideIndex  = n);
}

Вот и все! Ваша проблема решена!!!

НО

Все еще существует некоторая проблема!

Вы можете заметить, что ваша кнопка «Назад» работает не так, как ожидалось. Это потому, что у вас всего 6 элементов div с одинаковым именем класса! итак, здесь slides.length фактически возвращается 6. Таким образом, вы можете передать другой индикатор своей функции из вашего html. И вы должны поместить отдельную slideIndex переменную для учета каждого события.

Я пытался отредактировать ваш javascript .

Вот полный рабочий код:

 // Get the modal
let modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
let btn = document.getElementsByClassName('text');

// Get the <span> element that closes the modal
let span = document.getElementsByClassName("close");



// When the user click on the button, open the modal
for (let i = 0; i < btn.length; i  ) {
  btn[i].onclick = function() {
    modal[i].style.display = "flex";
  }
}

for (let i = 0; i < span.length; i  ) {
  span[i].onclick = function() {
    modal[i].style.display = "none";
  }
}

let slideIndex = [1, 4];
let slides = document.getElementsByClassName("mySlides"),
  dots = document.getElementsByClassName("dot");

// Next/previous controls
function plusSlides(counter, index) {
  showSlide((slideIndex[index]   counter), index);
}

// Thumbnail image controls
function currentSlide(position, index) {
  showSlide(position, index);
}

function showSlide(position, index) {
  let lastPostion = index * 3   3,
    firstPosition = index * 3   1;

  if (position > lastPostion) {
    position = firstPosition;
  }
  if (position < firstPosition) {
    position = lastPostion;
  }
  slides[slideIndex[index] - 1].style.display = "none";
  dots[slideIndex[index] - 1].className = dots[slideIndex[index] - 1].className.replace(" active", "");

  slides[position - 1].style.display = "block";
  dots[position - 1].className  = " active";

  slideIndex[index] = position;
}

function initSlide() {
  for (var i = 0; i < slides.length; i  ) {
    slides[i].style.display = "none";
  }

  for (var i = 0; i < slides.length; i  ) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[0].style.display = "block";
  dots[0].className  = " active";
  slides[3].style.display = "block";
  dots[3].className  = " active";
}
initSlide();

 <button id="myBtn" class="text">Learn More</button>
<!--Modal-->
<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="slideshow-container">
      <!--Full-width images with number and caption text-->
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
      </div>
      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="images/checkbook1.jpg" class="modal-image" style="width:100%">
      </div>
      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="images/checkbook.jpg" class="modal-image" style="width:100%">
      </div>
      <!--Next and previous buttons-->
      <a class="prev" onClick="plusSlides(-1, 0)">amp;#10094;</a>
      <a class="next" onClick="plusSlides(1, 0)">amp;#10095;</a>
    </div>
    <br>
    <!--The dots/circles-->
    <div style="text-align: center">
      <span class="dot" onClick="currentSlide(1, 0)"></span>
      <span class="dot" onClick="currentSlide(2, 0)"></span>
      <span class="dot" onClick="currentSlide(3, 0)"></span>
    </div>
    <h2 id="modal-heading">MyRegister App</h2>
    <p id="modal-text">This app simulates a checkbook register. Add deposits and withdraws.
    </p>
    <span class="close">amp;times;</span>
    <a href="https://github.com/cpickard2790/MyRegisterGUI/tree/master/My Register">Source Code</a>
  </div>
</div>
</div>
<div class="photo-wrap">
  <img src="images/test.jpg" class="portp">
  <button id="myBtn" class="text">Learn More</button>
  <!--Modal-->
  <div id="myModal" class="modal">
    <div class="modal-content">
      <div class="slideshow-container">
        <!--Full-width images with number and caption text-->
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img src="images/practest.png" class="modal-image" style="width:100%">
        </div>
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img src="images/test.jpg" class="modal-image" style="width:100%">
        </div>
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img src="images/practest.png" class="modal-image" style="width:100%">
        </div>
        <!--Next and previous buttons-->
        <a class="prev" onClick="plusSlides(-1, 1)">amp;#10094;</a>
        <a class="next" onClick="plusSlides(1, 1)">amp;#10095;</a>
      </div>
      <br>
      <!--The dots/circles-->
      <div style="text-align: center">
        <span class="dot" onClick="currentSlide(4, 1)"></span>
        <span class="dot" onClick="currentSlide(5, 1)"></span>
        <span class="dot" onClick="currentSlide(6, 1)"></span>
      </div>
      <h2 id="modal-heading">Practice Test App</h2>
      <p id="modal-text">This is a practice test application I made for work.</p>
      <span class="close">amp;times;</span>
      <a href="https://github.com/cpickard2790/MyRegisterGUI/tree/master/My Register">Source Code</a>
    </div>
  </div>
</div>

Надеюсь, это поможет вашему!

1. ДА! Спасибо! Я выяснил, что плюслайды отсутствовали =, а = было всего 15 минут назад. Но у меня все еще была та же проблема, которую вы только что описали, что и у меня! Вау, большое вам спасибо!

2. @chad, спасибо! Этот код не переработан должным образом. Подумайте о рефакторинге, если у вас будет немного времени. 🙂