如何更改打开和关闭详细信息/摘要的图片？答案

【问题标题】：How can I change picture on opening & closing details/summary?如何更改打开和关闭详细信息/摘要的图片？
【发布时间】：2022-01-20 03:58:40
【问题描述】：

这是我的第一个 JavaScript。花了很多时间，但无法让它工作。

显然，它应该做的是在“详细信息/摘要”部分打开时更改图片。仅供参考，这是我正在尝试解决的this problem 的后续行动。有人看到我做错了吗？

<body>
  <script type="text/javascript">
    function changeImage(a) {
      document.getElementById("img").src = a;
    }
    details.addEventListener("toggle", event => {
      if (details.open) {
        changeImage("https://via.placeholder.com/50/ff0000");
      } else {
        changeImage("https://via.placeholder.com/50/0000ff");
      }
    });
  </script>

  <details>
    <summary>
      <table>
        <td width="64">#910</td>
      </table>
    </summary>
    <table>
      <td width="64">#910</td>
    </table>
  </details>

  <img id="img" src='https://via.placeholder.com/50'>
</body>

【问题讨论】：

当你的脚本执行时，你页面中的 DOM 还没有准备好。将脚本标签放在结束</body>标签之前，然后重试...另外，看看stackoverflow.com/questions/807878/…
@JordiNebot 我尝试过（也在发布此主题之前，但又一次），但也不起作用。编辑：感谢您的链接，但我已添加到我的收藏夹中：-)
这是一个问题，但还有其他问题......例如details 未在您的脚本中定义。改用document.getElementsByTagName("details")[0].addEventListener(...
您需要养成在使用 JavaScript 时打开浏览器控制台的习惯。这里很明显出了什么问题。请参阅我在上面添加的 sn-p 演示。

标签： javascript html details-tag

【解决方案1】：

这是您缺少的部分：const details = document.querySelector('details')。然后就可以了。

    function changeImage(a) {
      document.getElementById("img").src = a;
    }
const details = document.querySelector('details')
    details.addEventListener("toggle", event => {
      if (details.open) {
        changeImage("https://via.placeholder.com/50/ff0000");
      } else {
        changeImage("https://via.placeholder.com/50/0000ff");
      }
    });

<body>
  <script type="text/javascript">

  </script>

  <details>
    <summary>
      <table>
        <td width="64">#910</td>
      </table>
    </summary>
    <table>
      <td width="64">#910</td>
    </table>
  </details>

  <img id="img" src='https://via.placeholder.com/50'>
</body>

【讨论】：

【解决方案2】：

使用event.currentTarget;，它指向正在监听事件的标签。那个事件是一个简单的“点击”，从来没有读过“切换”是一个事件，我今天学到了一些东西。

const changeImage = event => {
  const clicked = event.currentTarget;
  const img = document.querySelector('.img');

  if (clicked.matches('details')) {
    if (clicked.open) {
      img.src = "https://via.placeholder.com/50/ff0000";
    } else {
      img.src = "https://via.placeholder.com/50/0000ff";
    }
  }
}

document.querySelector('details').addEventListener('click', changeImage)

<details>
  <summary>
    <table>
      <td width="64">#910</td>
    </table>
  </summary>
  <table>
    <td width="64">#910</td>
  </table>
</details>
<img class="img" src='https://via.placeholder.com/50'>

【讨论】：