通过单击一个图标，它应该更改为另一个图标[关闭]答案

【问题标题】：By click on an icon it should change to another icon [closed]通过单击一个图标，它应该更改为另一个图标[关闭]
【发布时间】：2014-09-24 07:48:08
【问题描述】：

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

点击前如果是“猫”，点击后应该变成“老鼠”

大部分情况下不使用 jquery。

【问题讨论】：

你有没有尝试解决这个问题？

标签： javascript jquery html css

【解决方案1】：

试试这个（jQuery 代码）：

$(function() {
 $('.yourIconClass').click(function(){
   $("#yourIconId").attr('src',"img/picture1.jpg");
   return false;
 });
});

【讨论】：

【解决方案2】：

我猜这不是程序员高尔夫，但我尝试了一个快速而肮脏的解决方案：

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

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

希望有所帮助，但我认为搜索会找到一千个具有相同解决方案的网站。

【讨论】：

不使用 jquery
嗯？这不是 jquery，只是普通的 JavaScript……上面的答案使用了 jQuery。

【解决方案3】：

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

检查https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

没有真实代码的小例子

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

你需要一个带有 id 的 div（将第一张图片放在这里）

点击图片时调用脚本中的 function()

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

【讨论】：

【解决方案4】：

Demo

使用复选框

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');
}

来自：How to change an image on click using CSS alone?

【讨论】：