使用 javascript 更改图像答案

【问题标题】：Image change with javascript使用 javascript 更改图像
【发布时间】：2019-07-02 00:52:02
【问题描述】：

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

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>

【问题讨论】：

在您的 if 语句中，您不是在比较而是在分配。使用双等号或三等号将变量与字符串进行比较。
我已经删除了在这里充当红鲱鱼的语法错误。新答案应使用a.src 解决该问题。

标签： javascript image onclick src

【解决方案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>

【讨论】：

如果我改变它，我的图像即使在第一次点击时也没有改变。
@ownidea 检查演示代码片段我使用您的确切代码在答案中添加，但使用了正确的运算符===。

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

您可以通过两种方式（indexOf() 或 getAttribute()）：

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

或：

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

sn-p：

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>

【讨论】：