使用一个JavaScript文件将不同的内容加载到模式框

Question

我正尝试使用一个JavaScript文件打开一个具有不同内容的模式框，具体取决于所单击的内容。一个模式框效果很好，其他模式框可以加载正确的文本，但不能加载任何图片。如果我取出div类mySlides淡入淡出并仅将图片添加到模式框，则效果很好。我敢肯定，我忽略了一些简单的事情。

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

希望，这对您有帮助！