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

我有几个页面以相同的方式设置。每个页面大约有10到15个图像，如果您单击它们，图像会发生变化并变得无法点击。我对这个代码是：javascript动态更改图像src的位置 - NO JQuery

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的文件，我有想法添加源位置的图像作为wrapper-div的id-tag。

我对JavaScript有一点了解，而且我很难找到所需的东西。也可能是因为不是母语人士，也不知道我在找什么。

请记住，我的文件：

在旧版浏览器来工作，由于我们的客户的规格
不能固定使用jQuery（请不要进入该在评论或回答我不能在这个项目中使用它这不是来讨论）

tldr;我需要一种方法基础上，wrapper-的ID标签设置IMG SRC div

来源

2012-08-13 silvith

你上面贴的代码似乎罚款，哪里的问题？？ – yogi 2012-08-13 07:52:03

Whcih元素有onclick处理程序，'.content'？我唯一注意到的是，你从整个文档中获得所有的包装元素。你的意思是'el.getElementsByClassName'？ – 2012-08-13 07:56:32

@ yogi，当我点击它们时，图像不会改变 – silvith 2012-08-13 08:07:30

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

来源

2012-08-13 07:55:17 Musa

我试过这个：onclick =“ToggleOnclick（this.name，”som“）;”并在JavaScript函数ToggleOnclick（elID，loc）和el.src = loc +“/”+ el.name +“Clicked.png”; 但这不起作用 – silvith 2012-08-13 08:09:28

对不起，我不得不接受答案。浏览器对getElementsByClassName的支持是不够的，我需要它在老版本的浏览器中工作[链接] http://caniuse.com/getelementsbyclassname – silvith 2012-08-13 08:44:21

你可以使用getElementById（'som'） – Musa 2012-08-13 08:46:05

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

回答

相关问题