javascript - 从 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];
}

Here's a codepen with it implemented.