javascript - 两个 javascript 'changeimage' 函数，只有一个正在工作

Question

我正在学习 javascript，但我遇到了 ChangeImage 函数的问题。

我需要更改第一张和第二张图像。

这是 jsfiddle。

https://jsfiddle.net/7ewjoxnv/1/

下面是 javascript:

var switchingImage;

function changeImage()
{
        switchingImage.src = this.value;
}

window.onload = function() {
    var radios = document.getElementById('imageSwitcher').getElementsByTagName('input');
    switchingImage = document.getElementById('imageToSwitch');
    for(var i=0;i<radios.length;i++)
    {
        radios[i].onclick = changeImage;
    }

    var radios = document.getElementById('imageSwitcher2').getElementsByTagName('input');
    switchingImage = document.getElementById('imageToSwitch2');
    for(var o=0;o<radios.length;o++)
    {
        radios[o].onclick = changeImage;
    }
}

任何帮助将不胜感激。

最诚挚的问候，大卫!

Answer 1

当您第二次执行 var radio = 和 switchingImage = 时，您正在更改它们之前的值。

对于radios，它只是发生并且不会影响您，因为您已经将所需的监听器应用到旧的单选按钮。

但是，在 switchingImage 的情况下，它会影响您，因为 switchingImage 最终将指向 document.getElementById('imageToSwitch2') 。因此，当您调用 changeImage() 时，它将始终对 document.getElementById('imageToSwitch2') 进行操作。

这是解决问题的一种方法。它故意不是最好的解决方案。使用它作为基线来改进它。

https://jsfiddle.net/7ewjoxnv/4/