0

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

脚本中共有六个图像。我只展示前两个。你能提供的任何帮助都会很棒。

4

1 回答 1

0

发生的事情是所有函数都共享同一个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)" />
于 2013-03-28T03:32:04.957 回答