如何将相同的功能应用于多个 ID？

Question

我正在尝试为我的网页创建一个灯箱。我目前正在关注 W3schools 的灯箱示例：http://www.w3schools.com/howto/howto_js_lightbox.asp

如果有帮助，我目前正在处理的网页在这里：http://students.washington.edu/cdm206k/tinfo230/assign5/multiplayer/multiWeapons.html

我现在可以在 S.Serp 的帮助下创建多个灯箱！ 但是，现在，我需要帮助显示所有灯箱的每个图像的标题。我尝试创建不同的唯一标题 ID，但它只会从第一个灯箱中删除每个图像的标题，并允许第二个灯箱有标题。

子机： [图片 1] [图片 2] [图片 3] [图片 4] [图片 5]

突击步枪： [img 1] [img 2] [img 3] [img 4] [img 5]

......也许还有3个小节。

我创建了第一个灯箱的副本，但第一个灯箱和第二个灯箱似乎有干扰。我的问题是，每当我验证页面时，它都会告诉我我有多个 ID。

第一个用于 myModal。我尝试为 id 使用不同的名称，但它仍然没有将相同的功能应用于第二个 id。 id 字幕也会发生同样的事情。

我希望这不会令人困惑。任何建议或帮助表示赞赏。谢谢你。 HTML：

        <h1> Black Ops 3 III - Weapons </h1>

        <h2> Primary </h2>
        <h3>Submachines: </h3>

        <section class="row">
          <section class="column">
            <img src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(1)" class="hover-shadow cursor" alt="Primary: Kuda">
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(2)" class="hover-shadow cursor" alt="Primary: Weevil">
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(3)" class="hover-shadow cursor" alt="Primary: Vesper">
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(4)" class="hover-shadow cursor" alt="Primary: Pharo">
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" onclick="openModal('myModal');currentSlide(5)" class="hover-shadow cursor" alt="Primary: Razorback" >
          </section>
        </section>

        <section id="myModal" class="modal">
          <span class="close cursor" onclick="closeModal('myModal')">&times;</span>
          <section class="modal-content">

            <section class="mySlides">
              <section class="numbertext">1 / 5</section>
              <img src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" alt="Primary: Kuda" >
            </section>

            <section class="mySlides">
              <section class="numbertext">2 / 5</section>
              <img src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" alt="Primary: Weevil" >
            </section>

            <section class="mySlides">
              <section class="numbertext">3 / 5</section>
              <img src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" alt="Primary: Vesper" >
            </section>

            <section class="mySlides">
              <section class="numbertext">4 / 5</section>
              <img src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" alt="Primary: Pharo" >
            </section>

            <section class="mySlides">
              <section class="numbertext">5 / 5</section>
              <img src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" alt="Primary: Razorback" >
            </section>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

            <section class="caption-container">
              <p id="caption"></p>
            </section>


            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/kuda.jpg" style="width:100%" alt="Primary: Kuda" onclick="currentSlide(1)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/weevil.jpg" style="width:100%" alt="Primary: Weevil" onclick="currentSlide(2)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/vesper.jpg" style="width:100%" alt="Primary: Vesper" onclick="currentSlide(3)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/pharo.jpg" style="width:100%" alt="Primary: Pharo" onclick="currentSlide(4)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/razorback.jpg" style="width:100%" alt="Primary: Razorback" onclick="currentSlide(5)" >
            </section>
          </section>
        </section>
        <hr /> ----------------------------------------------- <hr />
        <h3>Assault Rifles: </h3>

        <section class="row">
          <section class="column">
            <img src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(1)" class="hover-shadow cursor" alt="Primary: KN-44">
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(2)" class="hover-shadow cursor" alt="Primary: XR-2">
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(3)" class="hover-shadow cursor" alt="Primary: HVK-30">
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(4)" class="hover-shadow cursor" alt="Primary: ICR-1">
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(5)" class="hover-shadow cursor" alt="Primary: Man-O-War" >
          </section>
          <p></p>
          <section class="column">
            <img src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(6)" class="hover-shadow cursor" alt="Primary: Sheiva" >
          </section>
          <section class="column">
            <img src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" onclick="openModal('myModal1');currentSlide(7)" class="hover-shadow cursor" alt="Primary: M8A7" >
          </section>
        </section>

        <section id="myModal1" class="modal">
          <span class="close cursor" onclick="closeModal('myModal1')">&times;</span>
          <section class="modal-content">

            <section class="mySlides">
              <section class="numbertext">1 / 7</section>
              <img src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" alt="Primary: KN-44" >
            </section>

            <section class="mySlides">
              <section class="numbertext">2 / 7</section>
              <img src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" alt="Primary: XR-2" >
            </section>

            <section class="mySlides">
              <section class="numbertext">3 / 7</section>
              <img src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" alt="Primary: HVK-30" >
            </section>

            <section class="mySlides">
              <section class="numbertext">4 / 7</section>
              <img src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" alt="Primary: ICR-1" >
            </section>

            <section class="mySlides">
              <section class="numbertext">5 / 7</section>
              <img src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" alt="Primary: Man-O-War" >
            </section>

            <section class="mySlides">
              <section class="numbertext">6 / 7</section>
              <img src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" alt="Primary: Sheiva" >
            </section>

            <section class="mySlides">
              <section class="numbertext">7 / 7</section>
              <img src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" alt="Primary: M8A7" >
            </section>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>

            <section class="caption-container">
              <p id="caption"></p>
            </section>


            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/kn44.jpg" style="width:100%" alt="Primary: KN-44" onclick="currentSlide(1)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/xr2.jpg" style="width:100%" alt="Primary: XR-2" onclick="currentSlide(2)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/hvk30.jpg" style="width:100%" alt="Primary: HVK-30" onclick="currentSlide(3)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/icr1.jpg" style="width:100%" alt="Primary: ICR-1" onclick="currentSlide(4)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/manowar.jpg" style="width:100%" alt="Primary: Man-O-War" onclick="currentSlide(5)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/sheiva.jpg" style="width:100%" alt="Primary: Sheiva" onclick="currentSlide(6)" >
            </section>
            <section class="column">
              <img class="demo cursor" src="../multiplayer/weapons/primary/m8a7.jpg" style="width:100%" alt="Primary: M8A7" onclick="currentSlide(7)" >
            </section>
          </section>
        </section>

Javascript：

    <script>
    var modalSec;

    function openModal(id) {
      modalSec = document.getElementById('id');
      modalSec.style.display = "block";
    }
    function closeModal(id) {
     modalSec.style.display = "none";
    }

    var slideIndex = 1;

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = modalSec.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      var captionText = document.getElementById("caption");
      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";
      captionText.innerHTML = dots[slideIndex-1].alt;
      }
     </script>

CSS：

   * {
      box-sizing: border-box;
   }

   .row > .column {
      padding: 0 8px;
   }

   .row:after {
      content: "";
      display: table;
      clear: both;
   }

   .column {
      float: left;
      width: 20%;
   }

   /* The Modal (background) */
   .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: black;
   }

   /* Modal Content */
   .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      width: 90%;
      max-width: 1200px;
   }

   /* The Close Button */
   .close {
      color: white;
      position: absolute;
      top: 10px;
      right: 25px;
      font-size: 35px;
      font-weight: bold;
   }

   .close:hover,
   .close:focus {
      color: #999;
      text-decoration: none;
      cursor: pointer;
   }

      .mySlides {
      display: none;
   }

   .cursor {
      cursor: pointer
   }

  /* Next & previous buttons */
  .prev,
  .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
   }

   /* Position the "next button" to the right */
   .next {
      right: 0;
      border-radius: 3px 0 0 3px;
   }

  /* On hover, add a black background color with a little bit see-through */
   .prev:hover,
   .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
   }

   /* Number text (1/3 etc) */
   .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
   }

   img {
      margin-bottom: -4px;
   }

   .caption-container {
      text-align: center;
      background-color: black;
      padding: 2px 16px;
      color: white;
   }

   .demo {
      opacity: 0.6;
   }

   .active,
   .demo:hover {
      opacity: 1;
   }

   img.hover-shadow {
      transition: 0.3s
   }

   .hover-shadow:hover {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0,      0.19)
   }

Answer 1

当您有多个模态部分时，您必须将模态 div 的 id 传递给 javascript 函数。您在 w3school 中提到的示例如下：

变化是：

» 表示第一部分（'myModal'）：

<img ... onclick="openModal('myModal'); currentSlide(1)">
...
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal('myModal')">&times;</span>
 ...

» 用于第二部分（'myModal2'）：

<img ... onclick="openModal('myModal2'); currentSlide(1)">
...
<div id="myModal2" class="modal">
  <span class="close cursor" onclick="closeModal('myModal2')">&times;</span>
 ...

» javascript 变化：

var modalDiv; //new variable to store current modal div

function openModal(id) {
  modalDiv = document.getElementById(id); //keep it in our var
  modalDiv.style.display = "block";
}

function closeModal(id) {
  modalDiv.style.display = "none"; //use modalDiv var here!
}

var slideIndex = 1;
//showSlides(slideIndex); //remove this line, its an error!!

...

function showSlides(n) {
  var i;
  var slides = modalDiv.getElementsByClassName("mySlides"); //use modalDiv var here!
  var dots = modalDiv.getElementsByClassName("demo"); //modified to get proper demo images
  var captionText = modalDiv.getElementsByClassName("caption-container")[0].children[0]; //modified to get proper caption

 ...

---

完整代码如下sn-p（参见[Full page]视图）：

var modalDiv;

    function openModal(id) { 
      modalDiv = document.getElementById(id);
      modalDiv.style.display = "block";
    }

    function closeModal(id) {
      modalDiv.style.display = "none";
    }

    var slideIndex = 1;
    //showSlides(slideIndex);

    function plusSlides(n) {
      showSlides(slideIndex += n);
    }

    function currentSlide(n) {
      showSlides(slideIndex = n);
    }

    function showSlides(n) {
      var i;
      var slides = modalDiv.getElementsByClassName("mySlides");
      var dots = modalDiv.getElementsByClassName("demo");
      var captionText = modalDiv.getElementsByClassName("caption-container")[0].children[0];
      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";
      captionText.innerHTML = dots[slideIndex - 1].alt;
    }

body {
    font-family: Verdana, sans-serif;
    margin: 0;
  }

  * {
    box-sizing: border-box;
  }

  .row > .column {
    padding: 0 8px;
  }

  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  .column {
    float: left;
    width: 25%;
  }

  /* The Modal (background) */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
  }

  /* Modal Content */
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
  }

  /* The Close Button */
  .close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }

  .mySlides {
    display: none;
  }

  .cursor {
    cursor: pointer;
  }

  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  img {
    margin-bottom: -4px;
  }

  .caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
  }

  .demo {
    opacity: 0.6;
  }

    .active,
    .demo:hover {
      opacity: 1;
    }

  img.hover-shadow {
    transition: 0.3s;
  }

  .hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

<h2 style="text-align:center">Lightbox</h2>

  <div class="row">
    <div class="column">
      <img src="http://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(1)" class="hover-shadow cursor">
    </div>
    <div class="column">
      <img src="http://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(2)" class="hover-shadow cursor">
    </div>
    <div class="column">
      <img src="http://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(3)" class="hover-shadow cursor">
    </div>
    <div class="column">
      <img src="http://www.w3schools.com/howto/img_lights.jpg" style="width:100%" onclick="openModal('myModal'); currentSlide(4)" class="hover-shadow cursor">
    </div>
  </div>

  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal('myModal')">&times;</span>
    <div class="modal-content">

      <div class="mySlides">
        <div class="numbertext">1 / 4</div>
        <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">2 / 4</div>
        <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">3 / 4</div>
        <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">4 / 4</div>
        <img src="http://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">
      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>

      <div class="caption-container">
        <p id="caption"></p>
      </div>


      <div class="column">
        <img class="demo cursor" src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise2">
      </div>
      <div class="column">
        <img class="demo cursor" src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway">
      </div>
      <div class="column">
        <img class="demo cursor" src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
      </div>
      <div class="column">
        <img class="demo cursor" src="http://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
      </div>
    </div>
  </div>



  <hr /> ----------------------------------------------- <hr />



  <div class="row">
    <div class="column">
      <img src="http://www.w3schools.com/howto/img_nature.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(1)" class="hover-shadow cursor">
    </div>
    <div class="column">
      <img src="http://www.w3schools.com/howto/img_fjords.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(2)" class="hover-shadow cursor">
    </div>
    <div class="column">
      <img src="http://www.w3schools.com/howto/img_mountains.jpg" style="width:100%" onclick="openModal('myModal2'); currentSlide(3)" class="hover-shadow cursor">
    </div>
  </div>


  <div id="myModal2" class="modal">
    <span class="close cursor" onclick="closeModal('myModal2')">&times;</span>
    <div class="modal-content">

      <div class="mySlides">
        <div class="numbertext">1 / 3</div>
        <img src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">2 / 3</div>
        <img src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
      </div>

      <div class="mySlides">
        <div class="numbertext">3 / 3</div>
        <img src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
      </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>

      <div class="caption-container">
        <p id="caption"></p>
      </div>


      <div class="column">
        <img class="demo cursor" src="http://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise2">
      </div>
      <div class="column">
        <img class="demo cursor" src="http://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Trolltunga, Norway2">
      </div>
      <div class="column">
        <img class="demo cursor" src="http://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords2">
      </div>

    </div>
  </div>

Answer 2

使用类模态将javascript应用于多个元素 id 用于唯一的单个元素

Answer 3

function openModal() {
  var a = document.querySelectorAll('.modal');
  var i = 0;
  while ( i<a.length){
       a[i].style.display = "block";
       i++;
  }
}
function closeModal() {
  var a = document.querySelectorAll('.modal');
  var i = 0;
  while ( i<a.length){
       a[i].style.display = "none";
       i++;
  }
}

改用这个。

Answer 4

您可以减少标记和代码，并通过使用event delegation 和单个模态元素而不是将事件硬编码到每个元素，使其在未来更容易扩展。

更纤细的 HTML：

<div id="modal">
<img class="modal-image">
<div class="modal-button modal-close">&times;</div>
<div class="modal-button modal-prev">&#10094;</div>
<div class="modal-button modal-next">&#10095;</div>
<div class="modal-counter"></div>
</div>

<h3>Submachines:</h3>
<div class="weapons">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=Kuda" alt="Primary: Kuda">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=Weevil" alt="Primary: Weevil">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=Vesper" alt="Primary: Vesper">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=Pharo" alt="Primary: Pharo">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=Razorback" alt="Primary: Razorback" >
</div>

<h3>Assault Rifles:</h3>
<div class="weapons">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=KN-44" alt="Primary: KN-44">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=XR-2" alt="Primary: XR-2">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=HVK-30" alt="Primary: HVK-30">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=ICR-1" alt="Primary: ICR-1">
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=Man-O-War" alt="Primary: Man-O-War" >
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=Sheiva" alt="Primary: Sheiva" >
  <img src="https://dummyimage.com/200x100/000000/fff.png&text=M8A7" alt="Primary: M8A7" >
</div>

JS：

"use strict";

var modal = document.getElementById('modal'),
  modalImage = document.querySelector('.modal-image'),
  modalCounter = document.querySelector('.modal-counter');

document.querySelectorAll('.weapons').forEach(function (weaponCollection) {

  // this uses the spread operator (...) to convert the nodeList into
  // a real array. Most recent versions of modern browsers support this
  // (IE11 doesn't but it is not a recent browser, Edge does). You can
  // convert a nodeList in an ES5 friendly way if you need to...
  var weapons = [...weaponCollection.querySelectorAll('img')],
    totalWeapons = weapons.length;

  weaponCollection.addEventListener('click', function (evt) {
    var target = evt.target,
      weaponNumber = weapons.indexOf(target) + 1;
    // if the item that was clicked was one of the image tags
    if (target.tagName === 'IMG') {
      modalImage.src = target.src;
      modalCounter.textContent = weaponNumber + ' / ' + totalWeapons;
      modal.classList.add('show');
    }
  }, false);
});

function closeModal () {
  modal.classList.remove('show');
}

document.querySelector('.modal-close').addEventListener('click', closeModal, false);

JSFiddle example

我没有实现下一个和上一个按钮，因为太晚了，我很累。我只是想展示事件委托如何使这种事情变得不那么冗长。实现 prev 和 next 按钮可能需要一些重构，稍后我可能会更新示例。我还要提到，如果你不反对使用 jQuery，我相信有很多现成的插件可以为你做这种事情。