从Javascript阵列中交换图像

Question

我正在编码一个包含多个图像交换的页面。我想交换两张不同的图像，但是其中只有一张正在工作，因为图像iD对于所有图像都是相同的。

我不擅长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>

Answer 1

你也可以将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.

Answer 2

的ID不应当被使用一次以上在一个HTML文件，并且同样地，只的getElementById得到一种元素。改为使用类和getQuerySelectorAll方法。

Answer 3

Id属性应该是唯一的。如果2个元素具有相同的ID，则document.getElementById将仅返回前1个。您应该使用类属性和document.getElementsByClassName。

如果您确实无法更改此设置，则可以使用document.querySelectorAll('[id=theImage]')。

而且，这里要添加一个数组转换为字符串：

obj.src = imgPath + imgArray; 

所以你.src s的未能恰当交换。

Answer 4

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

可以适应这个功能，创建第二个鼠标悬停