从 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

你也可以像 Rachel 建议的那样将 id 作为参数传递。只要确保您有不同的 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];
}

这是一个实现它的代码笔。

Answer 2

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

您可以调整此功能以创建第二个鼠标悬停

Answer 3

一个 ID 不应该在 HTML 文件中多次使用，因此，getElementById 只能获取一个元素。请改用类和 getQuerySelectorAll 方法。

Answer 4

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

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

同样在这里，您将一个数组添加到字符串中：

obj.src = imgPath + imgArray;

因此，您的.src没有正确交换。