更改圖像上的選擇onchange

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