javascript - 使用一个 JavaScript 文件加载不同的内容到模态框

Question

我正在尝试使用一个 javascript 文件打开一个模式框，该模式框根据单击的内容具有不同的内容。一个模态框效果很好，其他的模态框加载正确的文本，但没有加载任何图片。如果我取出 div 类 mySlides fade 并将图片添加到模式框，它工作正常。我确信我忽略了一些简单的事情。

// 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)">&#10094;</a>
      <a class="next" onClick="plusSlides(1)">&#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">&times;</span>
    <a href="https://github.com/cpickard2790/MyRegisterGUI/tree/master/My%20Register">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)">&#10094;</a>
        <a class="next" onClick="plusSlides(1)">&#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">&times;</span>
      <a href="https://github.com/cpickard2790/MyRegisterGUI/tree/master/My%20Register">Source Code</a>
    </div>
  </div>
</div>

Answer 1

因为没有附上图片。我看不出图片是不是变了。
阅读您的代码后，我了解到您正在根据此 html 代码更改幻灯片。

<!--Next and previous buttons-->
<a class="prev" onClick="plusSlides(-1)">&#10094;</a>
<a class="next" onClick="plusSlides(1)">&#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)">&#10094;</a>
      <a class="next" onClick="plusSlides(1, 0)">&#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">&times;</span>
    <a href="https://github.com/cpickard2790/MyRegisterGUI/tree/master/My%20Register">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)">&#10094;</a>
        <a class="next" onClick="plusSlides(1, 1)">&#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">&times;</span>
      <a href="https://github.com/cpickard2790/MyRegisterGUI/tree/master/My%20Register">Source Code</a>
    </div>
  </div>
</div>

希望这对您有所帮助!