我有几个页面以相同的方式设置。每个页面大约有 10 到 15 张图像，如果单击它们，图像会发生变化并且变得无法单击。
我为此的代码是：
function ToggleOnclick(elID)
{
var el = document.getElementById(elID);
var loc = document.getElementsByClassName("wrapper");
if (el.onclick)
{
// Disable the onclick
el._onclick = el.onclick;
el.onclick = null;
el.src = loc.id + "/" + el.name + "Clicked.png";
}
}
图像的 html 是：
....
<div class="content">
<div class="wrapper" id="som">
<div class="img0"><img src="som/doos.png" alt="doos" name="doos" id="doos" onclick="ToggleOnclick(this.name);" /></div>
<div class="img1"><img src="som/beer.png" alt="beer" name="beer" id="beer" onclick="ToggleOnclick(this.name);" /></div>
<div class="img2"><img src="som/bel.png" alt="bel" name="bel" id="bel" onclick="ToggleOnclick(this.name);" /></div>
....
因为我需要制作大约 20 个 html 文件，所以我想到将图像的源位置添加为包装器 div 的 id 标签。
我对 javascript 知之甚少，很难找到我想要的东西。也可能是因为我不是母语人士并且不知道我到底在寻找什么。
请记住我的文件：
- 由于我们客户的规格，必须在较旧的浏览器版本中工作
- 无法用 JQuery 修复（请不要在评论或答案中讨论这一点。我不能在这个项目中使用它。这不值得讨论。）
tldr；我需要一种方法来根据包装器 div 的 id 标签设置 img src
getElementsByClassName https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName给出一个集合而不是单个元素
将元素传递给ToggleOnclick所以你不必在函数中获取它
function ToggleOnclick(el)
{
//var loc = document.getElementsByClassName("wrapper")[0];//assuming there is only one wrapper
if (el.onclick)
{
// Disable the onclick
el._onclick = el.onclick;
el.onclick = null;
//el.src = loc.id + "/" + el.name + "Clicked.png";
el.src = el.src.replace(".png", "Clicked.png");
}
}
<img src="som/doos.png" alt="doos" name="doos" id="doos" onclick="ToggleOnclick(this);" />
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
