试图使用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

（（这是我在不同帖子上的答案-存在类似问题）

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

否则，这是一个代码片段：

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>