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

Posted 2023-03-05

【中文标题】通过单击一个图标，它应该更改为另一个图标[关闭]

【英文标题】：By click on an icon it should change to another icon [closed]

【发布时间】：2014-09-24 07:48:08

【问题描述】：

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

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

大部分情况下不使用 jquery。

【问题讨论】：

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

【参考方案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?