Javascript 需要帮助调整changeImage js代码吗

我是一个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";
    }
}

---

脚本中总共有六个图像。我只是展示前两个。您所能提供的任何帮助都将非常好。

发生的情况是，所有函数都共享同一个

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

在启动时预加载图像，然后在这些图像之间切换怎么样？@Vincent Piel-你认为这只是图像未加载的问题吗？即使在我多次点击图片之后，它们仍然需要双击才能更改。他们被那个点载入了，对吧？谢谢你的回复。这是成功的一半。它停止了我正在经历的双击，但它不会将图像切换回第四个。它只需更改图像一次，然后停止。我试着在代码中交换开和关的状态，但是没有帮助。有什么想法吗？好的，现在发生的是浏览器正在完成src属性，使其成为一个绝对地址（添加位），因此条件测试永远不会返回

true

，我编辑了我的答案，以便我们测试图像地址是否位于源属性的末尾