时间戳

首页 > 解决方案 > 更改由选择 HTML 元素更改的图像的问题

javascript - 更改由选择 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 语句在服装项目的正面视图和基于图像元素的鼠标悬停的后视图之间交替。

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

标签： javascripthtml

解决方案

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

我已经做到了可以悬停进出的位置，并在服装项目的不同颜色选项的前视图和后视图之间交替。

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"
  }
  
});

推荐阅读