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 回答