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

Question

我正在学习 javascript，但我对 changeimage 函数有疑问。

我需要同时更改一张和第二张图片。

这是 jsfiddle。

在下方，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/

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

Two javascript 'changeimage' functions, only one is working

javascript

function

onload