Onclick 事件作用于特定按钮答案

【问题标题】：Onclick event act on specific buttonOnclick 事件作用于特定按钮
【发布时间】：2015-11-14 17:37:10
【问题描述】：

我有一个名为 changeImage 的函数，我只想更改我单击的按钮。
我怎样才能做到这一点？我不认为硬代码是解决方案。我正在使用 PHP 和 javascript。 *我有大约 100 个按钮，每个按钮都有自己的 ID，例如：A1,A2,B1,B2

我的代码：

<script type="text/javascript">
        function changeImage() {
            var image = document.getElementById('A1');
            if (image.src.match("Grey")) {
                image.src = "Image/Yellow.png";
            } else {
                image.src = "Image/Grey.png";
                return false;
        }
    }</script>
<input id="A1" type="image" src="Image/Grey.png" onclick="changeImage()">
<input id="A2" type="image" src="Image/Grey.png" onclick="changeImage()">
<input id="B1" type="image" src="Image/Grey.png" onclick="changeImage()">
<input id="B2" type="image" src="Image/Grey.png" onclick="changeImage()">

【问题讨论】：

标签： javascript php html button onclick

【解决方案1】：

改用此代码：

<script type="text/javascript">
    function changeImage(e) {
        var image = e;
        if (image.src.match("Grey")) {
            image.src = "Image/Yellow.png";
        } else {
            image.src = "Image/Grey.png";
            return false;
        }
    }
</script>

<input id="A1" type="image" src="Image/Grey.png" onclick="changeImage(this)">
<input id="A2" type="image" src="Image/Grey.png" onclick="changeImage(this)">
<input id="B1" type="image" src="Image/Grey.png" onclick="changeImage(this)">
<input id="B2" type="image" src="Image/Grey.png" onclick="changeImage(this)">

【讨论】：

【解决方案2】：

因此，不要调用某个 id，而是使用 this 命令。就像如果单击此按钮更改其来源

   function changeImage(button) {   //button = this onclick="changeImage(button)";
        if (button.src.match("Grey")) {
            button.src = "Image/Yellow.png";
        } else {
            button.src = "Image/Grey.png";
            return false;
        }
    }

签到JSFiddle

【讨论】：

【解决方案3】：

通过函数参数传递一个变量，并在函数内部获取它，如下所示：https://stackoverflow.com/a/6575272/1864597。

如果您不需要传递任何变量（并且希望保持清洁），请使用@developer 的答案。

【讨论】：