css Javascript:单击时更改图像,再次单击时恢复为原始图像

bwitn5fc  于 2022-11-19  发布在  Java
关注(0)|答案(6)|浏览(237)

你好,我一直在四处寻找,我似乎找不到我要找的东西。我已经尝试了一些解决方案,建议在其他职位,并没有对我有利的工作。
标题几乎概括了我正在努力完成的事情,如果你需要更多的信息,请留下评论,询问你想知道的事情。
这段代码的主要部分是myFunction,其余部分是我做的例子,这样人们可以更好地理解我的思维过程,代码如下:
第一个
还有一个实时预览here,JSfiddle here。谢谢你的任何帮助。

z6psavjg

z6psavjg1#

如果你使用的是jQuery,这是一个简单的例子,你可以把背景色替换成图片
第一个

drnojrws

drnojrws2#

不需要那么多代码。只需要两个CSS规则和切换类名。一个CSS规则有一个图像,另一个规则有另一个图像。添加类后,第二个图像就会出现。
第一个

flvlnr44

flvlnr443#

第一个函数不设置背景图像,所以它不改变也就不足为奇了;第二个函数检查背景图像是否是蓝色的,如果是,就将其设置为蓝色;第二个函数不改变背景图像,它只是确认当前状态。

if (document.getElementById("demoNoVars").style.backgroundImage == "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)") {
    document.getElementById("demoNoVars").style.backgroundImage = "url(http://www.babybedding.com/images/fabric/solid-turquoise-fabric_smaller.jpg)";

具有相同的URL,因此不会发生任何变化。
你应该交换第二个函数中的if条件,第一个函数应该设置背景。

plupiseo

plupiseo4#

这是一个非常简单的脚本,我使用了一个数据属性来存储第二个图像,我将这些图像抓取到一个数组中并进行旋转。
第一个

68bkxrlz

68bkxrlz5#

当我将这些答案中的一些移到我的环境中时,我遇到了一些问题,但是使用它们做更多的研究时,我发现了一些对我有用的东西。
我想在这里发布解决方案,以防有人遇到这个问题,而其他解决方案在他们的环境中也不起作用。
代码如下:
第一个
感谢大家的回复!

相关问题