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

仅适用于这一特定实例。我希望它可以在多个地方使用完全不同的图片。

4

3 回答 3

0

将两个图像传递给交换函数，并使用实际单击对象的 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-19T17:12:03.967 回答
0

因此，您可以使用大小写切换并根据发件人 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-19T17:13:29.407 回答
0

为什么不只使用 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 并切换那个类。如果你想要一个例子就问。任何其他问题只是问。

..有很多方法可以实现您想要的，您的方法不是一个好方法。

于 2013-08-19T17:28:31.140 回答