javascript - 使用 onclick() 更改图像

Question

我想在单击对象时将图像更改为其他图像。代码按以下顺序堆叠:

<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>

我想做的是，当我点击 <li>我想将图像更改为图像的彩色版本，即其他图像。现在，我知道我可以使用 JQuery/JS 来完成它。但是我不想用大量的 JS 代码来完成这么简单的事情。

可以使用更简单的方法来完成吗？像伪选择器？ .active类(class)？

我好像想不出来。

Answer 1

要使用 javascript 更改图像 onclik，您需要具有 id 的图像:

<p>
    <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
        style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"/>
</p>

然后您可以在单击图像时调用 javascript 函数:

function changeImage() {
    if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png"){
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
    } else {
        document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
    }
}

如果当前 img.src 设置为 minimize.png，此代码会将图像设置为 maximize.png，反之亦然。 欲了解更多详情，请访问: Change image onclick with javascript link