Javascript - 交换多张图片

首先，我刚开始学习JavaScript，因此您的耐心等级将得到赞赏。我有一个问题，我正试图弄清楚。我正在寻找能够点击图像的方法，然后单击我想要交换的图像。详细说来，我有9个图像标记为0-9，和9个空白图像。我的目标是能够点击一个编号的图像并交换为空白图像之一。我所想到的就是这个，但它绝对不能以我需要的方式工作。Javascript - 交换多张图片

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

来源

2014-03-05 swam

<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>

上面的代码说明了两个重要的技术：一个。传递自我引用以避免繁琐的命名;湾将状态变量存储在DOM对象中

来源

2014-03-05 05:05:48 Schien

这绝对是更多的我如何需要它的操作。但是我仍然遇到了将“0.jpg”放在“blank.jpg”的问题。当我点击0时，它变成空白，但我需要将该“0”放在我想要的位置。希望这是有道理的。 – swam

我明白你的意思了。您不必在代码中硬编码“0”和“1”。图像“src”属性已包含这些值。当你第一次点击图片时，“osrc”属性为空。这是我设置的自定义标志。所以我将当前的“src”值存储为“osrc”。如果你点击了一个具有“3.jpg”的图像，那么osrc将是“3.jpg”。当你第二次点击图像时，空白被替换为原来存储的值，在这种情况下为“3.jpg”。 – Schien

好的，我遵循。有没有办法将“osrc”的值放入“blank.jpg”中，并自动将“blank.jpg”的值放在我最初点击的位置？例如;点击“1.jpg”，然后点击9个空白中的任何一个，并将“空白”点击到1.jpg“？ – swam

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

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

来源

2014-03-05 05:05:29

试试这个。说你的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"; 
    } 
}

来源

2014-03-05 05:05:51 BKM

Javascript - 交换多张图片

回答

相关问题