Javascript 需要在操作时刷新函数

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

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

我提供我的脚本是希望这足够了，但如果上下文需要，我可以提供完整的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>

//打开仅显示图像1的模式
函数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'；
}
函数openImgtype（evt，imgtypeName）{
变量i，x，t；
x=document.getElementsByCassName（“imgtype”）；
对于（i=0；i
明信片
网络图形

---

我希望OpenModel函数在执行操作时进行刷新，以便每次运行OpenModel时都将w3浅灰色类添加到Image1项中。但是，w3浅灰色属性仍保留在最后一个交互的Image1项上。

如果我理解正确并且不确信我理解正确，那么您总是希望第一个项具有w3浅灰色类，然后不要在迭代器中包含第一个项（仍然不确定为什么要循环通过并删除该类，如果您总是希望它存在的话？）

对于您的“但是，w3浅灰色属性将粘贴到最后一个交互的Image1项目。”注释-您有一个获取“w3浅灰色”类的单击事件目标-如果我理解您的注释，则不需要这样做

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

'在多个模态中单击以移动w3浅灰色属性意味着技术上最后一个交互项包含w3浅灰色属性'…嗯

---

注：你的问题很复杂，让人困惑——比如说，有时少就是多——我有一组情态动词，当我做“X”时，我希望“Y”发生。我目前的实现就是这样做的……yadayada……你的代码在这里……yadayada

如果我理解正确，但我不相信我会这样做，你总是希望第一个项目是w3浅灰色的类则不包括迭代器中的第一项（仍然不确定为什么要循环遍历并删除该类，如果您总是希望它在那里的话？）

对于您的“但是，w3浅灰色属性将粘贴到最后一个交互的Image1项目。”注释-您有一个获取“w3浅灰色”类的单击事件目标-如果我理解您的注释，则不需要这样做

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

'在多个模态中单击以移动w3浅灰色属性意味着技术上最后一个交互项包含w3浅灰色属性'…嗯

---

另外，你的问题很复杂，让人困惑——比如说，有时候少就是多——我有一套情态动词，当我做“X”时，我想让“Y”发生。我目前的实现就是这样做的……yadayada……你的代码在这里……yadayada

将你的

HTML

添加到你的帖子中。没有它，你的代码就没有多大帮助。请添加一个工作示例以供参考我想帮忙you@RyanWilson我刚刚为我的一个modals添加了一个HTML示例。就代码和布局而言，我几乎所有的modals都是相同的。我希望这会有所帮助！将你的HTML添加到你的帖子中。没有它，你的代码就没有多大帮助。请添加一个工作示例以提供帮助you@RyanWilson我刚刚为添加了一个HTML示例我的一个modals。就代码和布局而言，我几乎所有的modals都是相同的。我希望这有帮助！感谢@mcgraw的帮助！当我刚开始几乎不懂Javascript时，很难清楚地描述这个问题。很抱歉！据我所知，openImgtype函数中的所有内容都正常工作。我的问题是我的openImgtype函数优先于我的OpenModel函数。一旦OpenModel函数打开包含所有“tablinks”项的模式，它就会正常工作。当我关闭该模式并打开一个新模式时（使用OpenModel函数），我希望“w3浅灰色”类每次都能捕捉到第一个“tablinks”项。不用担心，只是想了解您需要什么。一次打开的模式是否超过1个？w3浅灰色类允许超过1个元素？或者这是您希望该类打开的唯一图像吗？如果将此添加到打开模式方法中，当调用该函数时，数组中的第一项将获取类let targetImg=yourImageArray[0]。classList.add（'w3-light-gray'））@barfbats如果我的解释回答了您的问题，请您单击答案旁边的

向上箭头

，或者解释为什么它不能回答您的问题，以便我可以为您提供另一个答案。谢谢。我认为一个直观的示例将比我的文字更好地解释这一点！在这里，您将看到“桌面视图”按钮