Question

首先，我刚开始学习javascript，所以请耐心等待。我有一个问题，我想弄明白。我正在寻找一种方法来单击图像，然后单击我想要交换它的图像。详细说来，我有9个标记为0-9的图像和9个空白图像。我的目标是能够单击编号的图像并将其交换为其中一个空白图像。我想出的就是这个，但绝对不能按我需要的方式工作。

function swap1() {
    element = document.getElementById('0')
    if (element.src.match("0.jpg")) {
        element.src = "blank.jpg";
        alert(this.id)
    } else {
        element.src = "0.jpg";
    }
}

Answer 1

id不能以数字开头。将其更改为有效id，例如image，或者只需通过event.target获取对该元素的引用。

演示：http://jsfiddle.net/DerekL/b7C3H/

Answer 2

<img id="img0" src="0.jpg" onclick="swap(this);">
<img id="img1" src="1.jpg" onclick="swap(this);">
<img id="img2" src="2.jpg" onclick="swap(this);">

<script>
function swap(d){
  if (!d.osrc) d.osrc=d.src; //save the original src file
  if (d.blanked){
    d.src=d.osrc;
    d.blanked=null;
  } else {
    d.blanked=true;
    d.src='blank.jpg';
  }

  //un-blank the "other guys"

  for (var i=0;i<3;i++){ //change the upper bound as you add more images
    var obj=document.getElementById('img'+i);
    if (obj==d) continue; //skip self
    obj.blanked=null;
    obj.src=obj.osrc;
  }

}
</script>

以上代码演示了两种重要技术：a。通过自我引用以避免繁琐的命名;湾将状态变量存储在DOM对象中

Answer 3

试试这个。说你的HTML

<img id="myimage" onclick="swap1()" src="0.jpg">

function swap1() {
    element = document.getElementById('myimage');
    if (element.src.match("0.jpg")) {
        element.src = "blank.jpg";
    } else {
        element.src = "0.jpg";
    }
}

Javascript-交换多个图像

3 个答案: