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

Question

我想要一个菜单按钮（带有文本 "menu"），然后使用 rotateX 翻转它，然后将其变成文本 "close"。最初我试图用文本和动画来做，然后是文本和转换，当这不起作用时我决定我会制作一个 .svg 的 "close" 文本已经翻转所以我只需要做 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

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

如果您想要一个按钮来替换 <img> 元素的 src 属性，并且每次都使用不同的图像，那么您可以在此处查看我的 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>

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

Trying to make an img src change on click with javascript and css?

javascript

css

click