Question

我是初学者，我需要一些帮助来清理这些代码。这是一个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)" />

需要帮助调整changeImage js代码

1 个答案: