Question

我又来了一个问题。

我有四个按钮，当我点击按钮1时，它将按钮图像从旧图像更改为新图像确定现在图像已更改但是如果我按下按钮2则按钮2的图像被更改但是按钮1的图像是一样的新形象。我希望它恢复旧图像。这是代码：

<input type="image" id="start" src="buttonred.png" width="50px" height="50px" onClick= "this.src='buttonblue.png'"/>
         <input type="image"  id="stop" src="buttonred.png" width="50px" height="50px" onClick="this.src='buttonblue.png'"/>
          <input type="image"  id="slow" img src="buttonred.png" width="50px" height="50px" onClick="this.src='buttonblue.png'"/>
           <input type="image" id="fast" img src="buttonred.png" width="50px" height="50px" onClick="this.src='buttonblue.png'"/>

Answer 1

未经测试，但您正在寻找的是这样的东西：

(function () {
    var elems = document.getElementsByTagName("input");
    for (var i = 0; i < elems.length; i++) {
        elems[i].addEventListener("click", function () {
            for (var a = 0; a < elems.length; a++) {
                elems[a].src = "buttonred.png";
            }
            elems[i].src = "buttonblue.png";
        });
    }
})()

这里的关键是让你的功能在所点击的图像发生变化之前将所有图像重置回原始图像。

Answer 2

在记事本中输入并测试。

它实际上是搜索字符串值buttonred并用buttonblue替换它，反之亦然。

<input type="image" id="start" src="buttonred.png" width="50px" height="50px" onClick="colorChange(this.id)"/>
<input type="image" id="stop" src="buttonred.png" width="50px" height="50px" onClick="colorChange(this.id)"/>
<input type="image" id="slow" src="buttonred.png" width="50px" height="50px" onClick="colorChange(this.id)"/>
<input type="image" id="fast" src="buttonred.png" width="50px" height="50px" onClick="colorChange(this.id)"/>

<script>

function colorChange(id) {
    var btn = document.getElementById(id);

    if (btn.src.match(/buttonred/gi) != null) {
        btn.src = btn.src.replace("buttonred.png","buttonblue.png");
    }
    else {
        btn.src = btn.src.replace("buttonblue.png","buttonred.png");
    }
}

</script>

如何在onClick事件上更改其他按钮的图像？

2 个答案: