如何在打开和关闭时更改图片 details/summary？

Question

这是我第一次 JavaScript。花了很多时间，但无法正常工作。

显然，它应该做的是在'details/summary'部分打开时改变图片。仅供参考，这是我正在尝试解决的 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>

Answer 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>

Answer 2

使用event.currentTarget;，指向监听事件的标签。那个事件很简单'click'，没看过'toggle'是个事件，今天学到东西了

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'>

如何在打开和关闭时更改图片 details/summary？

How can I change picture on opening & closing details/summary?

html

javascript

details-tag