图像变化 javascript

Question

我是 javascript 的新手。我想知道我做错了什么。我想在函数 onclick 上交换图像 src。第一次点击后，我的图片更改为 "close"，但每次点击它似乎都关闭了。以防万一，我不想要其他解决方案。我只想知道我的脚本出了什么问题。谢谢！

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

您在 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 2

您在 if 语句中的条件应如下所示

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

Answer 3

首先把 = 改成 === 一个不同的：

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>

Answer 4

您可以通过两种方式完成 (indexOf() or 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>

图像变化 javascript

Image change with javascript

javascript

image

onclick

src