Javascript 使用引导单击按钮时显示图像组

如何根据当时按下的正确按钮将一组图像更改到正确的位置。我发现了一个按钮包含多个图像的例子，但我不知道如何使用多个按钮将不同的图像放置在一个设定的位置

例如，我有三个按钮，每个按钮在被单击时都会显示三个不同的图像，以取代先前显示的按钮

HTML:

篮球
足球
曲棍球

JAVASCRIPT:

<script>
function basketballImg(){
    picLocation1('img/bbImage1.png');
    picLocation2('img/bbImage2.png');
    picLocation3('img/bbImage3.png');
}

function footballImg(){
    picLocation1('img/fbImage1.png');
    picLocation2('img/fbImage2.png');
    picLocation3('img/fbImage3.png');
}

function hockeyImg(){
    picLocation1('img/hyImage1.png');
    picLocation2('img/hyImage2.png');
    picLocation3('img/hyImage3.png');
}
</script>

函数basketballImg（）{
picLocation1（'img/bbImage1.png'）；
picLocation2（'img/bbImage2.png'）；
picLocation3（'img/bbImage3.png'）；
}
功能足球（）{
picLocation1（“img/fbImage1.png”）；
picLocation2（“img/fbImage2.png”）；
picLocation3（“img/fbImage3.png”）；
}
函数hockeyImg（）{
picLocation1（'img/hyImage1.png'）；
picLocation2（'img/hyImage2.png'）；
picLocation3（'img/hyImage3.png'）；
}

---

这样的脚本是获得选定图像组的最佳方式吗？我愿意接受任何建议！提前谢谢

如果我理解正确，您正在尝试根据单击按钮将图像更改为一组新图像。 这是我能想到的最简单的方法，虽然这不是最有效的方法，但这应该有效

function basketballImg(){
document.getElementById('img1').href = 'img/bbImage1.png';
document.getElementById('img2').href = 'img/bbImage2.png';
document.getElementById('img3').href = 'img/bbImage3.png';

}

function footballImg(){
document.getElementById('img1').href = 'img/fbImage1.png';
document.getElementById('img2').href = 'img/fbImage2.png';
document.getElementById('img3').href = 'img/fbImage3.png';

}

function hockeyImg(){
document.getElementById('img1').href = 'img/hyImage1.png';
document.getElementById('img2').href = 'img/hyImage2.png';
document.getElementById('img3').href = 'img/hyImage3.png';

}

---

现在，单击每个按钮，这些图像集将被存在的图像所替换。

见鬼，是的，这已经奏效了！我唯一需要更改的是src而不是href。下面是一个后续问题，你知道如何使图像具有响应性吗？它的工作原理是响应性的，比如淡入淡出或其他一些东西，请详细说明？

function basketballImg(){
document.getElementById('img1').href = 'img/bbImage1.png';
document.getElementById('img2').href = 'img/bbImage2.png';
document.getElementById('img3').href = 'img/bbImage3.png';

}

function footballImg(){
document.getElementById('img1').href = 'img/fbImage1.png';
document.getElementById('img2').href = 'img/fbImage2.png';
document.getElementById('img3').href = 'img/fbImage3.png';

}

function hockeyImg(){
document.getElementById('img1').href = 'img/hyImage1.png';
document.getElementById('img2').href = 'img/hyImage2.png';
document.getElementById('img3').href = 'img/hyImage3.png';

}