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 - 交換多張圖片

回答

相關問題