Javascript 点击一个图标，它会变成另一个图标

如果我单击一个图标，该图标必须更改为另一个图标

在单击之前，如果单击之后为“cat”，则应将其更改为“rat”

---

大多数情况下不使用jquery。

在问这些简单的问题之前，你真的应该试着解决你的问题

检查

没有实际代码的小示例

您需要一个带有函数的脚本

您需要一个id为的div（将第一个图像放在这里）

单击图像时，在脚本中调用函数（）

使用上面的链接找出getelementbydid。。。必须放在函数中的innerHTML。

试试这个（jQuery代码）：

---

我想这不是编码器高尔夫，但我尝试了一个快速而肮脏的解决方案：

<img id="catrat" src="cat.jpg" onclick="javascript:changeImage()">

<script>
    function changeImage() {
        document.getElementById("catrat").src = "rat.jpg" 
    }
</script>

函数changeImage（）{
document.getElementById（“catrat”）.src=“rat.jpg”
}

希望这会有所帮助，但我认为搜索会带来上千个具有相同解决方案的网站。

使用复选框

input[type="checkbox"] {
    width: 0;
    height: 0;
    margin: 0;
    border: 0 none;
    padding: 0;
    cursor: pointer;
}
input[type="checkbox"]:before {
    content: url('http://www.bernardbrogue.com/images/fb24_24.png');
    display: block;
    width: 24px;
    height: 24px;
    overflow: hidden;
}
input[type="checkbox"]:checked:before {
    content: url('http://isleofcapricasinos.com/uploadedImages/z-Asset_Library/Miscellaneous/Google-Plus-Logo-24x24.png?n=1533');
}

---

from:

您是否尝试过解决此问题？不使用jqueryHuh？这不是jquery，只是简单的JavaScript。。。上面的答案使用jQuery。

input[type="checkbox"] {
    width: 0;
    height: 0;
    margin: 0;
    border: 0 none;
    padding: 0;
    cursor: pointer;
}
input[type="checkbox"]:before {
    content: url('http://www.bernardbrogue.com/images/fb24_24.png');
    display: block;
    width: 24px;
    height: 24px;
    overflow: hidden;
}
input[type="checkbox"]:checked:before {
    content: url('http://isleofcapricasinos.com/uploadedImages/z-Asset_Library/Miscellaneous/Google-Plus-Logo-24x24.png?n=1533');
}