与JavaScript的图像变化

Question

我在JavaScript的新手。我想知道我在做什么错。我想就函数图像的src交换的onclick。在首先点击“关闭”，但每次我的形象变化更似乎被关闭。为以防万一，我不想其他的解决办法。我只是想知道什么是对我的脚本去错了。谢谢！

function menuOpenClose()
{
    var a = document.getElementById("mobile-menu-icon")

    if (a.src === "icon/menu.svg") {
        a.src = "icon/close.svg";
    } else {
        a.src = "icon/menu.svg";
    }
}

img {
        display: block;
        width: 32px;
        height: 32px;
    }

<div class="menu-icon" onclick="menuOpenClose();">
  <img id="mobile-menu-icon" src="icon/menu.svg">
</div>

Answer 1

你可以这样做有两种方式（indexOf()或getAttribute()）：

if (a.src.indexOf("icon/menu.svg") != -1) {

要么：

if (a.getAttribute('src') == "icon/menu.svg") {

该片段：

function menuOpenClose()
{
    var a = document.getElementById("mobile-menu-icon")

    //if (a.getAttribute('src').indexOf("icon/menu.svg") != -1) {
    if (a.getAttribute('src') == "icon/menu.svg") {
        a.src = "icon/close.svg";
    } else {
        a.src = "icon/menu.svg";
    }
    console.log(a.src);
}

<div class="menu-icon" onclick="menuOpenClose();">
    <img id="mobile-menu-icon" src="icon/menu.svg">
</div>

Answer 2

你的if语句的条件应该有如下

   if (a.src === "icon/menu.svg") {

Answer 3

你在你的if statement而不是比较操作使用赋值运算符。

更改此：

if (a.src = "icon/menu.svg")

为此：

if (a.src === "icon/menu.svg")

---

检查并运行下面的代码段用于上述方法的一个实际的例子：

/* CSS */
img {display: block;width: 32px;height: 32px;}

<!-- JavaScript -->
<script>
function menuOpenClose(){
    var a = document.getElementById("mobile-menu-icon")

    if (a.src === "https://picsum.photos/50/50?image=0") {
        a.src = "https://picsum.photos/50/50?image=1";
    } else {
        a.src = "https://picsum.photos/50/50?image=0";
    }
}
</script>

<!-- HTML -->
<div class="menu-icon" onclick="menuOpenClose();">
  <img id="mobile-menu-icon" src="https://picsum.photos/50/50?image=0">
</div>

Answer 4

首先变化=以===它不同：

a.src === "icon/menu.svg"这是否正确

其次，你可以看到你永远不会改变你的形象，因为你的病情不能抓住它。

这是从控制台前面回答：

@>src https://stacksnippets.net/icon/menu.svg

你总是这样else

        function menuOpenClose() {
            var a = document.getElementById("mobile-menu-icon")

            console.log(`@>src`,a.src)

            if (a.src === "icon/menu.svg") {
                a.src = "icon/close.svg";
            } else {
                a.src = "icon/menu.svg";
            }
        }

<div class="menu-icon" onclick="menuOpenClose();">
    <img id="mobile-menu-icon" src="icon/menu.svg">
</div>