Question

我有来回切换图像的代码，它工作正常。但是，我想知道是否有办法重写脚本，以便我可以在多个地方使用它。这是我目前的代码：

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

仅适用于此特定实例。我希望它可以完全在不同的地方在多个地方工作。

Answer 1

将两张图片传递给交换函数，并使用实际点击的对象的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

Answer 2

因此，您可以使用案例切换并根据发件人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')" />

Answer 3

为什么不使用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并切换该类的类。如果你想要一个例子，只需询问。其他问题只是问。

..有很多方法可以达到你想要的，你的方法不是很好。

点击即可切换多个图像

3 个答案: