如何将相同的函数应用于多个ID？

Question

我正试图为我的网页创建一个灯箱。我目前正在遵循lightbox的W3schools示例：lightbox.asp

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

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

分机: img 1 img 3 img 5

突击步枪: img 1 img 3 img 5<-我想为这个做另一个灯箱。

.也许还会有三个小节。

我已经创建了第一个灯箱的副本，但似乎与第一个灯箱和第二个灯箱有干扰。我的问题是，每当我验证页面时，它都会告诉我我有多个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

当您有不止一个模态部分时，您必须将modal的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

 ...

完整的代码如下所示(请参阅完整的页面视图)：

​

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++;
  }
}

用这个代替。