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

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

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

Answer 2

您可以通过两种方式（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);
}

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>

使用JavaScript更改图片

4 个答案: