Question

我有多个图像（用作按钮），如果点击，它将更改图标。

<img id = "i1" onClick = "changeImg()" src = "img1.png">
<img id = "i2" onClick = "changeImg()" src = "img2.png">
<img id = "i3" onClick = "changeImg()" src = "img3.png">
.....

在我的功能中，这就是我试图做的事情：

for(var x = 1; x <=5; x++){
   if(document.getElementById("i"+x).src == "img" + x + ".png")
        document.getElementById("i"+x).src = "pic" + x + ".png")
}

但显然，当我点击一个按钮（图像）时，所有其他按钮似乎也被点击（并且它们都改变了它们的图标）。我想要做的是，如果我点击一张图片，那么该图片就会改变它的图标。同样，如果我点击另一张图片，依此类推......

这可能看起来很简单，（但我真的想不出一种解决方法;我是编程的新手 - 特别是javascript）请你好。感谢您的帮助（先进的）。

Answer 1

试试这个：

function changeImg(x) { 
    if(document.getElementById("i"+x).src == "img" + x + ".png")
        document.getElementById("i"+x).src = "pic" + x + ".png")
}

HTML：

<img id = "i1" onClick = "changeImg(1)" src = "img1.png">

Answer 2

每个函数都需要this来处理其相关内容。

<img id = "i1" onClick = "changeImg(this)" src = "img1.png">

例如，使用

function changeImg(tag) {
    alert(tag);
    // console.log(tag);
}

您可以看到this在这种情况下的含义。

要访问每个代码的src：

function changeImg(tag) {
    alert(tag.src);
    // console.log(tag.src);
}

我会使用替换函数将 img 替换为图片：

str.replace(search, replacement);

Example

完整的解决方案：

<强> HTML

<img id = "i1" onClick = "changeImg(this)" src = "img1.png">
<img id = "i2" onClick = "changeImg(this)" src = "img2.png">
<img id = "i3" onClick = "changeImg(this)" src = "img3.png">

<强>的JavaScript

function changeImg(tag) {
    var id = tag.id;
    var el = document.getElementById(id);
    var src = tag.src;
    var newSrc = src.replace("img", "pic");
    el.src = newSrc;
}

单击按钮（一次一个）并更改其图标

2 个答案: