点击切换多个图像

-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

点击切换多个图像

回答

相关问题