根据所选选项更改图像的 SRC

Question

我必须更改具有不同项目的多个图像的属性“src”。

所以我正在尝试使用以下代码来完成：

脚本

function ColorSrcSet(ImageId) {
  var imgID = document.getElementById(ImageId);
  var optionValue = $(this).attr("value");
  imgID.src = optionValue;
}

html

  <select onchange="ColorSrcSet('img-1');">
    <option value="../img/1.png">Amarillo</option>
    <option value="../img/2.png">Naranja</option>
    <option value="../img/3.png"></option>
  </select>

  <img id="img-1" src="../img/transparent.png"></img>

它给我一个错误并将“SRC”设置为未定义。

¿有人知道如何解决吗？

Answer 1

onchange 函数中没有明确的this

不过您可以将该值作为另一个参数传递

JS

function ColorSrcSet(ImageId, selectVal) {
   document.getElementById(ImageId).src = selectVal;     
}

HTML

<select onchange="ColorSrcSet('img-1', this.value);">

根据所选选项更改图像的 SRC

Changing the SRC of an image depending on the selected option

javascript

jquery

html-select

src

srcset