Question

我想在选择时更改图像。我将解释整个事情是如何运作的。实际上我首先要根据所选颜色更改图像。我在社区的帮助下完成了这一部分。现在我想根据选择更改图像。如果是，则加载相同颜色但有颜色的图像。

这是我尝试过但不起作用的:(

    function collarChange(clickedOption) {
        if (clickedOption.value == "Yes")
        {
            if ( document.getElementById("libaasImage").src == "images/black.png" )
            {
                document.getElementById("libaasImage").src = "images/black-collar.png";
            }
        }
}

<div class="col-md-3 colourWhite" onclick="ChangeLibaas(this)"></div>
<div class="col-md-3 colourBlack" onclick="ChangeLibaas(this)"></div>
<div class="col-md-3 colourGold" onclick="ChangeLibaas(this)"></div>

<select onchange="collarChange(this)">
    <option value="select">Select..</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>

Answer 1

这是一个可以帮助您制作代码的工作小提琴。有两点需要注意： 1）我将事件传递到您的collarChange函数以访问所选值。 2）我更改了您的if语句以检查indexOf。

https://jsfiddle.net/x0hrgj84/

HTML：

<select onchange="collarChange(event)">
    <option value="select">Select..</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
</select>
<img src="images/black.png" id="libaasImage">

使用Javascript：

collarChange = function (event) {
  if (event.target.value == "Yes")
  {
    if ( document.getElementById("libaasImage").src.indexOf("images/black.png") != -1 )
    {
      document.getElementById("libaasImage").src = "images/black-collar.png";
    }
  }
}

在select onchange上更改图像

1 个答案: