點擊切換多個圖像

-1

我有代碼來回切換圖像，它工作正常。但是，我想知道是否有重寫腳本的方法，以便我可以在多個地方使用它。這是我目前的代碼：點擊切換多個圖像

function swaparrows(obj) { 
     var x=document.images 

      if (x[0].src.match('images/editloadout.png')) { 
       x[0].src="images/editloadoutopen.png"; 
      } 

      else if (x[0].src.match('editloadoutopen.png')) { 
       x[0].src="images/editloadout.png"; 
      } 
    } 

<img src="images/editloadout.png" onclick="swaparrows()" />

它只適用於這一個特定的實例。我希望它完全可以在多個不同圖片的地方工作。

來源

2013-08-19 user1895377

這取決於你想如何存儲額外的圖像數據。 –

爲什麼要求所有文檔圖像（'var x = document.images'），而不是在函數參數中使用'obj'？ – putvande

使用CSS和目標？ – cocco

傳入到交換功能的兩個圖像，並用實際點擊的對象的src：

function swaparrows(obj, i1, i2) { 
    var src = obj.getAttribute('src'); 

    if (src.match(i1)) 
    obj.setAttribute('src', i2); 
    else 
    obj.setAttribute('src', i1); 
}

其中HTML是：

<img src="images/editloadout.png" 
    onclick="swaparrows(this, 'images/editloadout.png', 'editloadoutopen.png')" />

例如：http://codepen.io/paulroub/pen/GoEBF

來源

2013-08-19 17:12:03

所以你可以使用案例開關，並根據發件人ID決定。參考：http://www.w3schools.com/js/js_switch.asp 示例：

function swaparrows(idTag) { 
     var ele = document.getElementById(idTag); 
     switch(idTag){ 
      case("editLoadout"):     
      if (ele.src.match('images/editloadout.png')) { 
       ele.src="images/editloadoutopen.png"; 
      }  
      else if (ele.src.match('editloadoutopen.png')) { 
       ele.src="images/editloadout.png"; 
      } 
      break; 
      case("button2"): 
      if (ele.src.match('images/button2.png')) { 

       ele.src="images/button2open.png"; 
      } 

      else if (ele.src.match('button2open.png')) { 
       ele.src="images/button2.png"; 
      } 
      break; 

     } 
    } 

<img id="editLoadout" src="images/editloadout.png" onclick="swaparrows('editLoadout')" /> 

<img id="button2" src="images/button2.png" onclick="swaparrows('button2')" />

來源

2013-08-19 17:13:29

爲什麼不只是使用CSS，讓JavaScript做更重要的事情？

更換background-color與background-image或任何

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Switch</title> 
<style> 
.i{ 
width:32px;line-height:32px; 
display:block;float:left; 
text-align:center; 
background-color:white; 
} 
.i:target{ 
background-color:green; 
} 
</style> 
</head> 
<body> 
<a class="i" id="a" href="#a">a</a> 
<a class="i" id="b" href="#b">b</a> 
<a class="i" id="c" href="#c">c</a> 
<a class="i" id="d" href="#d">d</a> 
<a class="i" id="e" href="#e">e</a> 
</body> 
</html>

另一種方法是設置與當前所選項目的JS var和切換類的that.if你想一個例子纔剛剛ask.any其他問題問。

..有很多方法去你想要的東西，你的方法不是很好。

來源

2013-08-19 17:28:31 cocco

點擊切換多個圖像

回答

相關問題