從Javascript陣列中交換圖像

我正在編碼一個包含多個圖像交換的頁面。我想交換兩張不同的圖像，但是其中只有一張正在工作，因爲圖像iD對於所有圖像都是相同的。從Javascript陣列中交換圖像

我不擅長JavaScript，似乎無法找到解決方法。任何幫助將非常感激。

var imgArray = new Array(
 
    '/en_us/local/page_specific/furniture/dining-rustique-main.jpg', 
 
    '/en_us/local/page_specific/furniture/dining-rustique-main2.jpg', 
 
    '/en_us/local/page_specific/furniture/dining-bonnie-main.jpg', 
 
    '/en_us/local/page_specific/furniture/dining-bonnie-main2.jpg' 
 

 
); 
 

 
var imgPath = ""; 
 

 
function swapImage(imgID, obj) { 
 
    var theImage = document.getElementById('theImage'); 
 
    var newImg; 
 
    newImg = imgArray[imgID]; 
 
    theImage.src = imgPath + newImg; 
 
    obj.src = imgPath + imgArray; 
 
} 
 

 
function preloadImages() { 
 
    for (var i = 0; i < imgArray.length; i++) { 
 
    var tmpImg = new Image; 
 
    tmpImg.src = imgPath + imgArray[i]; 
 
    } 
 
}

<table cellspacing="0" cellpadding="3" width="100%"> 
 
    <tr> 
 
    <td rowspan="2"> 
 
     <div id="image"><img id="theImage" src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/dining-bonnie-main.jpg"></td> 
 
    <td valign="top"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/dining-bonnie-gif.gif"></td> 
 
    </tr> 
 
    <tr> 
 
    <td valign="top"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/trail-brown.jpg" onmouseover="swapImage(3)"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/trail-grey.jpg" onmouseover="swapImage(2)"></td> 
 
    </tr> 
 

 

 
    <tr> 
 
    <td rowspan="2"> 
 
     <div id="image"><img id="theImage" src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/dining-rustique-main.jpg"></td> 
 
    <td valign="top"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/dining-rustique-gif.gif"></td> 
 
    </tr> 
 
    <tr> 
 
    <td valign="top"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-dark.jpg" onmouseover="swapImage(1)"><img src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-pine.jpg" 
 
     onmouseover="swapImage(0)"></td> 
 
    </tr> 
 
</table>

來源

2017-07-14 user3227561

ID應該是唯一的，但你可以使用類多次。使用不同的ID –

您仍然可以使用getElementById，但使用傳入的圖像ID作爲參數來隔離圖像 –

Hello Rachel，感謝您的回覆。我如何創建不同的ID？ – user3227561

你也可以將id作爲Rachel建議的參數。只要確保你有不同的ID。

<img id="theImage"> 
    <img id="theImage2">

只要確保你把它作爲一個參數

onmouseover="swapImage(3, 'theImage')" 
onmouseover="swapImage(2, 'theImage')" 
onmouseover="swapImage(1, 'theImage2')" 
onmouseover="swapImage(0, 'theImage2')"

下面是更新功能

function swapImage(imgID, id) { 
    var theImage = document.getElementById(id); 
    var newImg = imgArray[imgID]; 
    theImage.src = imgPath + newImg; 
    id.src = imgPath + imgArray[imgID]; 
}

Here's a codepen with it implemented.

來源

2017-07-14 23:58:30

THANK YOU SO MUCH – user3227561

@ user3227561而不是張貼「謝謝」，接受的答案。 https://stackoverflow.com/help/accepted-answer（只需將鼠標懸停答案旁邊點擊） –

@JoeB。扣！（我upvoted你的答案 - 就像CODEP BTW） –

的ID不應當被使用一次以上在一個HTML文件，並且同樣地，只的getElementById得到一種元素。改爲使用類和getQuerySelectorAll方法。

來源

2017-07-14 23:31:35 Dracorex

如果你可以提供文檔來支持這個，那將是一個更好的答案。 –

Id屬性應該是唯一的。如果2個元素具有相同的ID，則document.getElementById將僅返回前1個。您應該使用類屬性和document.getElementsByClassName。

如果您確實無法更改此設置，則可以使用document.querySelectorAll('[id=theImage]')。

而且，這裏要添加一個數組轉換爲字符串：

obj.src = imgPath + imgArray;

所以你.src s的未能恰當交換。

來源

2017-07-14 23:46:23

是imgPath = 「」; \t \t \t \t \t功能交換圖像（imgID）{ \t \t \t \t是theimage = document.querySelectorAll（ '[ID = theimage]'）。 \t \t \t \t是newImg; \t \t \t \t newImg = imgArray [imgID]; \t \t \t \t theImage.src = imgPath + newImg; \t \t \t \t \t \t} \t \t \t \t \t \t功能交換圖像（imgID）{ \t \t \t \t是theimage = document.querySelectorAll（ '[ID = theImage2]'）。 \t \t \t \t是newImg; \t \t \t \t newImg = imgArray [imgID]; \t \t \t \t theImage.src = imgPath + newImg; \t \t \t \t \t \t \t} – user3227561

您的JavaScript有點混亂。

爲此，您可以更有效地利用整潔「交換圖像」功能，設置src屬性，像這樣：

var i =0; 
 
function swapImage() { 
 
    if (i == 0) { 
 
    document.getElementById("myImage1").setAttribute('src', 'http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-dark.jpg'); 
 
    i++; 
 
    } else { 
 
    document.getElementById("myImage1").setAttribute('src', 'http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-pine.jpg'); 
 
    i--; 
 
    } 
 
}

<img id="myImage1" src="http://www.urbanbarn.com/images/urbanbarn/en_us/local/page_specific/furniture/rustique-sample-pine.jpg" onclick="swapImage();" border="0" /> 
 
<!--or on mouseout, whatever-->

可以適應這個功能，創建第二個鼠標懸停

來源

2017-07-14 23:48:01

從Javascript陣列中交換圖像

回答

相關問題