Нужна помощь в настройке changeImage js code

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)" />