javascript - 需要在操作时刷新功能

Question

首先，我不太熟悉 Javascript，所以简单的术语很有帮助!

我正在尝试编写一个脚本，以便在每次运行 openModal 函数时将此 w3-light-grey 属性添加到 Image1 模态。目前，我有多个模式，并且 w3-light-gray 属性仅在 openModal 函数上添加到第一个 Image1 元素。在多个模式中单击以移动 w3-light-gray 属性意味着从技术上讲，最后一个交互项包含 w3-light-grey 属性，而我希望第一个 Image1 项在 openModal 函数运行后始终具有该属性。

我正在提供我的脚本，希望这就足够了，但如果上下文需要的话，我可以提供我的完整 HTML/CSS。

<script>

// open the modal with only image 1 displayed

function openModal(modalId) {

      document.getElementById(modalId).style.display='block';
      document.getElementById(modalId+'Image1').classList.add('w3-light-grey');
      document.getElementById(modalId+'Image1').style.display='block';
      document.getElementById(modalId+'Image2').style.display='none';
    }

function openImgtype(evt, imgtypeName) {

  var i, x, tablinks;
  x = document.getElementsByClassName("imgtype");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < x.length; i++) {
    tablinks[i].classList.remove("w3-light-grey");
  }
  document.getElementById(imgtypeName).style.display = "block";
  evt.currentTarget.classList.add("w3-light-grey");
}

</script>

<!-- MODAL 5 Primary Colours Toys -->

<div id="toyscard" class="modal">
<div class="modal-content w3-animate-zoom">

    <span onclick="document.getElementById('toyscard').style.display='none'" class="button closebtn">×</span>
    <div class="desc">
    <h1>Primary Colours, Inc.</h1>
    <h2>TOYS Group Show Postcard and Graphics</h2>
      <p>This is the postcard design for Primary Colours, Inc.'s annual 
holiday group show, TOYS. Also shown are accompanying web graphics 
advertising the show. The postcard was a flat print with spot gloss over
 the title text and the Indy Reads Books donations call-out.</p>
     </div>

  <div class="buttons-bar">
   <button class="tablinks buttons-bar-item button w3-light-grey" onclick="openImgtype(event, 'toyscardImage1')">Postcard</button>
   <button class="tablinks buttons-bar-item button" onclick="openImgtype(event, 'toyscardImage2')">Web Graphics</button>
  </div>

  <div id="toyscardImage1" class="w3-container imgtype">
     <img src="Cel%20%20%20Graphic%20Design_files/TOYS2014_postcard.jpg">
  </div>

  <div id="toyscardImage2" class="w3-container imgtype">
     <img src="Cel%20%20%20Graphic%20Design_files/TOYS2014_graphics.png">
  </div>

 </div>
</div>

我希望 openModal 函数在操作时刷新，以便每次运行 openModal 时将 w3-light-gray 类添加到 Image1 元素。但是，w3-light-gray 属性会粘附到最后交互的 Image1 元素。

Answer 1

如果我理解正确并且我不相信我这样做，你总是希望第一个元素有 w3-light-gray 类然后不要在迭代器中包含第一个元素(仍然不确定你为什么'如果你总是想要它，重新循环并删除类？)

/*
if you only want the class on the first element in the array
single out the first item with imageArr[0] and scratch the for loop
*/
imageArr[0].classList.add('w3-light-gray')

对于您的“但是 w3-light-gray 属性坚持最后一个交互的 Image1 元素。”评论 - 你有一个获得“w3-light-gray”类的点击事件目标 - 如果我理解你的评论，这不是必需的

evt.currentTarget.classList.add("w3-light-grey");

“在多个模式中单击以移动 w3-light-gray 属性意味着从技术上讲，最后一个交互的元素包含 w3-light-grey 属性”……嗯？

附言。您的问题令人费解且令人困惑-例如，有时少即是多-我有一组模态，当我执行“X”时，我希望发生“Y”。我当前的实现是这样做的...yadayada...您的代码在这里...yadayada