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

回答

相關問題