gpt4 book ai didi

Javascript - 单击时图像按钮更改

转载 作者:行者123 更新时间:2023-11-30 11:41:40 25 4
gpt4 key购买 nike

这是我的代码,我从这个网站上得到的,确认有效。不适合我。不要介意 div 标签。

enter image description here

路径很好,它在 DW 中显示图像,但是在网站上单击图像后没有任何反应...

此外,代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Behavioral Meta Data -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="Style.css"/>
<title>Untitled Document</title>

</head>

<body>

<div id="container" class="container">
<ul id="scene" class="scene border fill">
<li id="Par_3" class="layer expand-width" data-depth="0.25"><img src="../Img/Par_3.svg" alt="Gallery"></li>
<li id="Par_2" class="layer expand-width" data-depth="0.20"><img src="../Img/Par_2.svg" alt="Grass_1"></li>
<li id="Par_25" class="layer expand-width" data-depth="0.20"><img src="../Img/Par_2.5.svg" alt="About me"></li>
<li id="Par_1" class="layer expand-width" data-depth="0.15"><img src="../Img/Par_1.svg" alt="Grass_2"></li>
<li id="Par_15" class="layer expand-width" data-depth="0.15"><img src="../Img/Par_1.5.svg" alt="Contact"></li>
<li id="Par_0" class="layer expand-width" data-depth="0.10"><img src="../Img/Par_0.svg" alt="Rock"></li>
<li id="Logo" class="layer expand-width" data-depth="0.05"><img src="../Img/Logo.svg" alt="Logo"></li>
</ul>

<img alt="" src="../Img/Click_u.svg" id="cm" onclick="changeImage()" />

</div>

<!-- Scripts -->

<script language="javascript">
function changeImage() {

if (document.getElementById("cm").src == "../Img/Click_u.svg")
{
document.getElementById("cm").src = "../Img/Click_ch.svg";
}
else
{
document.getElementById("cm").src = "../Img/Click_u.svg";
}
}
</script>

<script src="Parallax.js"></script>
<script>

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

</script>

</body>
</html>

最佳答案

问题是,.src 不仅返回相对路径 (../Img/Click_u.svg),而且返回整个路径 (http://www.yourwebsite.com/images/Img/Click_u.svg).

因此 if 条件永远不会为真,也永远不会改变图像。

Example screenshot

也许可以尝试一下

if (document.getElementById("cm").src.indexOf("Click_u.svg") != -1)

检查是否可以在较大的字符串 src 中找到片段“Click_u.svg”。

或者使用

document.getElementById("cm").getAttribute("src")`

它会返回属性的准确值(即相对路径)


适用于您的案例的代码:

if (document.getElementById("cm").getAttribute("src") == "../Img/Click_u.svg")
{
document.getElementById("cm").src = "../Img/Click_ch.svg";
}
else
{
document.getElementById("cm").src = "../Img/Click_u.svg";
}

由于某些奇怪的原因,在 getAttribute 方法的末尾似乎有一个不可见的字符。不知道为什么,但如果你,读者,愿意使用这段代码,请重新输入而不是复制粘贴。

Error 1

Error 2

这是另一个错误

关于Javascript - 单击时图像按钮更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42422301/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com