需要幫助調整changeImage js代碼

Question

我是一個js初學者，我需要一些幫助來清理此代碼。這是一個changeImage的情況，我顯示一個帶圖片的複選框，而不是實際的表單複選框。因此，用戶可以點擊一個空的複選框，點擊將圖像更改爲複選標記。他們可以再次點擊取消選中。這一切都有效，但這是問題。

單擊其中一個複選框圖像後，您必須單擊兩次以獲取另一個複選框圖像才能更改。我希望它是一個平滑的，單擊的情況，我不知道是什麼阻止了這一點。這裏是我正在使用的代碼片段 -

var newsrc = "img/checked.gif"; 

function changeImage() { 
    if(newsrc == "img/checked.gif") { 
     document.images["challenge"].src = "img/checked.gif"; 
     document.images["challenge"].alt = "Completed"; 
     newsrc = "img/checkBox.gif"; 
    } else { 
     document.images["challenge"].src = "img/checkBox.gif"; 
     document.images["challenge"].alt = "Unfinished"; 
     newsrc = "img/checked.gif"; 
    } 
} 

function changeImage2() { 
    if(newsrc == "img/checked.gif") { 
     document.images["goal1"].src = "img/checked.gif"; 
     document.images["goal1"].alt = "Completed"; 
     newsrc = "img/checkBox.gif"; 
    } else { 
     document.images["goal1"].src = "img/checkBox.gif"; 
     document.images["goal1"].alt = "Unfinished"; 
     newsrc = "img/checked.gif"; 
    } 
} 

腳本中共有六個圖像。我只是顯示前兩個。任何你能給的幫助都會很棒。

Answer 1

發生什麼事是所有的功能共享相同newsrc變量，當你點擊一個時，其他人認爲他們已被點擊。

你可能最好寫一個函數來切換src並在任何項目被點擊時調用該函數。

喜歡的東西：

function toggleImage(clickedImage){ 
    var checkedSrc='img/checked.gif'; 
    var currentSrc=clickedImage.src; 
    if(currentSrc.indexOf(checkedSrc) == currentSrc.length-checkedSrc.length){ 
     clickedImage.src='img/checkBox.gif'; 
     clickedImage.alt='Unfinished'; 
    }else{ 
     clickedImage.src='img/checked.gif'; 
     clickedImage.alt='Complete'; 
    } 
} 

而在你的HTML

<img id="whatever_1" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" /> 
<img id="whatever_2" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" /> 
<img id="whatever_3" src="img/checkBox.gif" alt="Unfinished" onclick="toggleImage(this)" />