javascript动态更改图像src的位置 - 没有JQuery

时间:2012-08-13 07:45:58

标签: javascript html image src

我以同样的方式设置了几个页面。每个页面有大约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-tag。

我对javascript知之甚少,而且我很难找到我正在寻找的东西。也可能是由于不是母语人士,也不知道我到底在寻找什么。

请记住我的档案:

    由于客户的规格,
  1. 必须使用较旧的浏览器版本
  2. 无法使用JQuery修复(请不要在评论或答案中进行修改。我不能在此项目中使用它。它不能用于讨论。)
  3. tldr;我需要一种基于wrapper-div的id-tag设置img src的方法

1 个答案:

答案 0 :(得分:1)

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);" />