使用JavaScript更改活動彩色圖像

Question

請看看這個JSFiddle 。

我嘗試編寫一些JS來制作它，以便當單擊底行中的一種顏色時，頂行中的圖像會發生變化。 我將應更改的圖像包括在JS中（它們都保存在imgur中）。

不幸的是，什么都沒有發生。 怎么了？

HTML

<div class = "row">
  <div class="active">
  <img id="active-color" src="https://i.imgur.com/wSRf1kZ.png"/>
  </div>
</div>

<div class="row">
  <div class="other-color">
  <img id ="black" src="https://i.imgur.com/NzYkFkO.png" onclick="changeImage()"/>
  </div>

  <div class="other-color">
  <img id ="green" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
  </div>

  <div class="other-color">
  <img id="pink" src="https://i.imgur.com/8oTZjc9.png"  onclick="changeImage()"/>
  </div>

  <div class="other-color">
  <img id="blue" src="https://i.imgur.com/oFSqOUp.png" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
  </div>

  <div class="other-color">
  <img id="brown" src="https://i.imgur.com/xbj7l5p.png" src="https://i.imgur.com/D2uiTnX.png" onclick="changeImage()"/>
  </div>
</div>

CSS

.row {
  display: flex;
  margin-bottom: 20px;
  width: 100%;
}

.other-color {
  width: 50px;
  height: 50px;
  display: block;
}

JS

//green on white
//https://i.imgur.com/04hDBLJ.png

//pink on white
//https://i.imgur.com/FG9voBX.png

//blue on white
//https://i.imgur.com/SmNcXqY.png

//brown on white
//https://i.imgur.com/erFfzyQ.png

function changeImage() {
//if black, stay black
if (document.getElementById("active-color").src == "https://i.imgur.com/NzYkFkO.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/wSRf1kZ.png";
}
//if green, turn green
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/04hDBLJ.png";
}
//if pink, turn pink
if (document.getElementById("active-color").src == "https://i.imgur.com/8oTZjc9.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/FG9voBX.png";
}
//if blue, turn blue
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/SmNcXqY.png";
}
//if brown, turn brown
if (document.getElementById("active-color").src == "https://i.imgur.com/D2uiTnX.png") 
{
document.getElementById("active-color").src = "https://i.imgur.com/erFfzyQ.png";
}
}

同樣，任何jQuery解決方案都可以。

Answer 1

嘗試這個

HTML：

<div class="other-color">
    <img id="black" src="https://i.imgur.com/NzYkFkO.png" onclick="changeImage(this.src)"/>
</div>

JS：

function changeImage(src) {
        //if black, stay black
        if (src == "https://i.imgur.com/NzYkFkO.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/wSRf1kZ.png";
    }
        //if green, turn green
        if (src == "https://i.imgur.com/D2uiTnX.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/04hDBLJ.png";
    }   //if pink, turn pink
        if (src == "https://i.imgur.com/8oTZjc9.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/FG9voBX.png";
    }   //if blue, turn blue
        if (src == "https://i.imgur.com/oFSqOUp.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/SmNcXqY.png";
    }   //if brown, turn brown
        if (src == "https://i.imgur.com/xbj7l5p.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/erFfzyQ.png";
    }
} 

Answer 2

您需要將單擊的數據傳輸到該函數以進行檢查。 到目前為止，無法檢查Javascript中單擊了哪些元素並獲取其src。 希望這可以幫助。

HTML：

<div class="other-color">
    <img id="blue" src="https://i.imgur.com/oFSqOUp.png" onclick="changeImage(this.src)"/>
</div>

JS：

function changeImage(src) {
    if (src == "https://i.imgur.com/oFSqOUp.png"){
        document.getElementById("active-color").src = "https://i.imgur.com/SmNcXqY.png";
    }
}