尝试使用 javascript 和 css 在点击时更改 img src？

Question

我想要一个菜单​​按钮（带有文本“菜单”），然后使用 rotateX 将其翻转，然后将其变成文本“关闭”。最初我试图用文本和动画来做，然后是文本和转换，当这不起作用时，我决定制作一个已经翻转的“关闭”文本的 .svg，所以我只需要做 180 度。

我的主要问题是，要么项目翻转并变换，并且在翻转时不变换，要么它只翻转一次，然后就不能再工作了。

const navSlide = () => {
  const menu = document.querySelector("#menu");
  const nav = document.querySelector(".nav-items");

  
  menu.addEventListener("click", () => {
    nav.classList.toggle("open");
    if (menu.src === './icons/menu.svg') {
      menu.src = './icons/close.svg';
      menu.classList.toggle('menu-flip');
    } else {
      menu.classList.toggle("menu-flip");
      menu.src = './icons/menu.svg';
    }
  })
};

navSlide();

#menu {
  font-family: "Syne Regular", Georgia, "Times New Roman", Times, serif;
  font-size: 54px;
  text-decoration: none;
  color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  line-height: 42px;
  letter-spacing: -1px;
  padding: 0;
  border: 0;
  background: none;
  transform: rotateX(0deg);
  transition: transform 0.2s ease-in;
  &.menu-flip{
    transform: rotateX(180deg);
    transition: transform 0.2s ease-in;
    letter-spacing: -4px;
  }
}

<div class="menu">
  <img id="menu" src="./icons/menu.svg" alt="menu" />
</div>

Answer 1

（这是我在另一个帖子上的回答 - 有类似的问题）

如果您想要一个按钮来替换 <img> 元素的 src 属性，每次使用不同的图像，那么您可以在此处查看我的 JSFiddle 示例：https://jsfiddle.net/f0a2s6pg/

否则，这里是一个代码sn-p：

var imgJson = {"items":[{
    "img": 'https:\/\/picsum.photos\/200\/300'
}, {
    "img": 'https:\/\/picsum.photos\/201\/301'
},
{
    "img": 'https:\/\/picsum.photos\/202\/302'
},
{
    "img": 'https:\/\/picsum.photos\/203\/303'
}
]}

var amount = 0
document.getElementById('imageBtn').onclick = function () {
    console.log("Replacing image...");
    document.getElementById("image").setAttribute("src", imgJson.items[amount].img);
    console.log(amount);
    if (amount == 3) {
        amount = 0;
    } else {
        amount++;
    }
}

<img id="image" src="https://picsum.photos/203/303" style="display: block;">
<button id="imageBtn" style="margin-top: 10px;">Random image</button>