更改由选择的HTML元素更改的图像的问题

问题描述

我目前正在网站上从事运动/运动装。在商店子页面中，我有单独的产品卡。那些具有不同颜色的产品将具有一个下拉菜单，用户可以在其中选择颜色并在网页上查看。我使用JavaScript为我工作。

我遇到的错误是试图在将鼠标悬停在图像元素上和从图像元素上移出时更改图像（在服装的正视图和后视图之间）。我将在下面附加代码：

---

HTML

<div id="item_4">
            <img src="img/apparel/shop_item_4.png" style="width:100%" alt="Hoody" id="item_4_switch">
            <h1>Apparel Item #1</h1>
            <p>$19.99</p>
            <select id="shop_item_4_switch">
                <option value="img/apparel/shop_item_4.png">Black</option>
                <option value="img/apparel/shop_item_4_alt_1.png">Blue</option>
                <option value="img/apparel/shop_item_4_alt_3.png">Red</option>
            </select>
            <p><button>Purchase</button></p>
        </div>

JavaScript

document.getElementById("shop_item_4_switch").onchange = changeShopItemFour;

function changeShopItemFour() {
  var img = document.getElementById("item_4_switch");
  img.src = this.value;
}

document.getElementById('item_4_switch').addEventListener('mouseenter',function() {
  
  if (this.src === "img/apparel/shop_item_4.png") {
    this.src = "img/apparel/shop_item_4_alt.png";
  } else if (this.src === "img/apparel/shop_item_4_alt_1.png") {
    this.src = "img/apparel/shop_item_4_alt_2.png";
  } else if (this.src === "img/apparel/shop_item_4_alt_3.png") {
    this.src = "img/apparel/shop_item_4_alt_4.png"
  }
  
});

document.getElementById('item_4_switch').addEventListener('mouseleave',function() {
  
  if (this.src === "img/apparel/shop_item_4_alt.png") {
    this.src = 'img/apparel/shop_item_4.png';
  } else if (this.src === "img/apparel/shop_item_4_alt_2.png") {
    this.src = "img/apparel/shop_item_4_alt_1.png";
  } else if (this.src === "img/apparel/shop_item_4_alt_4.png") {
    this.src = "img/apparel/shop_item_4_alt_3.png"
  }

});

---

我正在尝试获取 if语句，以便根据鼠标悬停在图像元素的上方和下方在服装的正面视图和背面视图之间进行切换。

我觉得我在某个地方犯了一个业余错误，任何指导将不胜感激！

解决方法

请忽略。我已经解决了这个问题。

我已经到了可以在其中进出悬停的位置，并且可以在服装的不同颜色选项的前视图和后视图之间进行切换。

document.getElementById('item_4_switch').addEventListener('mouseenter',function() {
  
  var x = document.getElementById('shop_item_4_switch')

  if (x.value === "img/apparel/shop_item_4.png") {
    this.src = "img/apparel/shop_item_4_alt.png";
  } else if (x.value === "img/apparel/shop_item_4_alt_1.png") {
    this.src = "img/apparel/shop_item_4_alt_2.png";
  } else if (x.value === "img/apparel/shop_item_4_alt_3.png") {
    this.src = "img/apparel/shop_item_4_alt_4.png"
  }
  
});

document.getElementById('item_4_switch').addEventListener('mouseleave',function() {
  
  var x = document.getElementById('shop_item_4_switch')

  if (x.value === "img/apparel/shop_item_4.png") {
    this.src = "img/apparel/shop_item_4.png";
  } else if (x.value === "img/apparel/shop_item_4_alt_1.png") {
    this.src = "img/apparel/shop_item_4_alt_1.png";
  } else if (x.value === "img/apparel/shop_item_4_alt_3.png") {
    this.src = "img/apparel/shop_item_4_alt_3.png"
  }
  
});