Question

我正在尝试制作一个程序，当你点击一个灯泡时灯泡将会打开，然后如果你再次点击它会关闭它。我有点击，但无论哪一个我clikc第一个总是打开。有人可以帮忙点击灯会亮吗？

<!DOCTYPE html>
<html>
    <body>

        <img id="light1" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

        <img id="light2" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

        <img id="light3" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

        <img id="light4" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">


    <script>
        function changeImage() {
            var image1 = document.getElementById('light1');
            if (image1.src.match("bulbon")) {
                image1.src = "pic_bulboff.gif";
            } else {
            image1.src = "pic_bulbon.gif";
            }
        }
    </script>

    </body>
</html>

Answer 1

在JavaScript中，事件处理程序获取一个名为this的特殊变量，它引用事件触发的元素（在这种情况下是点击的灯泡），你可以像这样使用它：

function changeImage() {
    if (this.src.match("bulbon")) {
        this.src = "pic_bulboff.gif";
    } else {
        this.src = "pic_bulbon.gif";
    }
}

请注意与您的代码的区别。您始终对第一个灯泡进行更改，使用API document.getElementById('light1')通过ID访问。

Answer 2

尽管在多个节点上注册了事件处理程序，但您仍指向函数中的相同DOM节点。

您应该使用this关键字将当前单击的节点用作函数执行期间的上下文。

打开和关闭灯

2 个答案: