如何在循环使用车轮样式时保持油漆颜色，反之亦然

Question

我想去年我问过这个问题，但我没有做好准备，我的问题也没有表达得很好。不管怎样，我有很多人愿意帮助我，我非常感激。这一次，我创造了一把小提琴，希望能让你们更好地帮助我。https://jsfiddle.net/jasonbruce/qwuojxg0/28/

如果需要，这是整页-https://www.sanjosecoder.com/porsche-working/index.html-所有代码都在页面上。

我正在制作一个模拟汽车选择器页面来帮助我学习JavaScript，并希望用户能够选择汽车颜色，然后选择车轮样式。在车轮样式中循环时应保持汽车颜色，反之亦然。我希望用户能够选择轮子样式，然后在保持所选轮子样式的同时循环使用颜色，或者选择油漆颜色，然后循环使用轮子。

目前，您可以在五种不同的轮子类型或十六种不同的颜色之间进行选择，但彼此独立，我无法想出将它们联系在一起的JavaScript逻辑。

我有每一张独特的图片，所有16种油漆颜色，所有5种车轮样式，所以总共有80张图片。

我考虑过/尝试过的事情。。。

• 创建一个包含所有80个图像路径的数组，并调用相应的路径
• 在HTML中创建80个图像标签，将它们放在DOM中，将图像类设置为显示：none；然后设置显示：块；单击

我没能和我的新手生成逻辑，我被卡住了。下面是我目前使用的一些逻辑。

function color1() {
document.getElementById("carerra").src = 'images/carerra-s/color1-option1.png';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1-checked.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
}

<!-- - - - - - - - - - - - - - - - - - CAR COLOR 2 - WHITE - - - - - - - - - - - - - - - - - -->
function color2() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color2-option1.png';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';  
}
<!-- - - - - - - - - - - - - - - - - - CAR COLOR 3 - YELLOW - - - - - - - - - - - - - - - - - -->
function color3() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color3-option1.png';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
}
<!-- - - - - - - - - - - - - - - - - - CAR COLOR 4 - RED - - - - - - - - - - - - - - - - - -->
function color4() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color4-option1.png';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
}

function color5() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color5-option1.png';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
}
function color6() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color6-option1.png';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
}

function color7() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color7-option1.png';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
}

function color8() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-working/images/carerra-s/color8-option1.png';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png");';
}

Answer 1

通过对可选择DOM元素进行迭代，可以显著减少代码量。。。

所以这里是你的网站显示汽车和车轮的电话。。。

<img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/color15-option3.png" alt="911 Carerra S" id="carerra" />

轮子有一种颜色和一个选项=>color15-option3

你所需要做的就是在这里插入颜色和轮子的正确索引，然后重新构建SRC链接，以显示显示选项的正确图像。

我们可以使用HTML中输入和轮子元素的dataset属性来确定颜色索引。

例如，下面的HTML行是可用颜色的第五行，因此我们将给它一个5:的data-id

<input id="exterior-swatch5" data-id="5" type="button" value=" " class="swatch" /> 

为每个可选择的元素添加数据集属性，该元素与插入SRC属性所需的正确字符串相对应，以从您的站点获取正确的图像。

您所要做的就是创建一个函数来处理两个事件侦听器，一个事件用于颜色，另一个用于轮子，每个回调都运行相同的函数来检查事件目标的类。

然后重建src属性以显示想要显示的正确图像。

document.getElementById('carerra').src = "https://www.sanjosecoder.com/porsche-working/images/carerra-s/color" + selectedColor + "-option" + wheelOption + ".png";

注意：您需要在HTML中检索颜色和轮子的默认设置，这可以使用默认src字符串上的几个.split函数来完成。我们使用此方法定义每个默认轮子和颜色，然后在每次使用条件触发点击事件时将它们插入。

const swatch = document.querySelectorAll('.swatch')
const wheels = document.querySelectorAll('.wheels')
const car = document.getElementById('carerra')
function getOptions(e) {
const selected = e.target;
let defaultColor = car.src.split('color')
let defColor = defaultColor[1].split('-')[0]
let defaultWheel = car.src.split('option')
let defWheel = defaultWheel[1].split('.')[0]

// conditional to check color
e.target.classList.contains('swatch') ?
//this is the color event
defColor = e.target.dataset.id : null
// conditional to check wheel
e.target.classList.contains('wheels') ?
//this is the wheel event
defWheel = e.target.dataset.id : null

document.getElementById('carerra').src = `https://www.sanjosecoder.com/porsche-working/images/carerra-s/color${defColor}-option${defWheel}.png`;
}
swatch.forEach(input => {
input.addEventListener('click', getOptions)
})
wheels.forEach(wheel => {
wheel.addEventListener('click', getOptions)
})
// this could be reduced down to => window.addEventListener('click', getOptions) 
// as there is a conditional to check the evnet classList and will only fire in 
// the conditional there is the proper class contained within the element

.swatch {
width: 35px;
height: 35px;
border: 1px solid #CCCCCC;
border-radius: 4px;
display: inline-block;
margin: 5px;
padding: 0;
overflow: hidden;
/* background-image: url(images/checkmark.png);
background-repeat: no-repeat;
background-position: 100% 100%;*/
}
.swatch:hover {
box-shadow: 0 0 3px #d7d4d4;
}
.swatch:active,
.swatch:focus {
border: 1px solid #ff0000;
box-shadow: 0 0 3px #ff0000;
}
#exterior-swatch1 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color1.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch2 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color2.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch3 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color3.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch4 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color4.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch5 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color5.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch6 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color6.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch7 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color7.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch8 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color8.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch9 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color9.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch10 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color10.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch11 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color11.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch12 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color12.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch13 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color13.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch14 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color14.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch15 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color15.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
#exterior-swatch16 {
background-image: url(https://www.sanjosecoder.com/porsche-working/images/swatches/exterior/exterior-color16.png);
background-repeat: no-repeat;
background-position: 50% 50%;
}
.wheels {
width: 45px;
height: 45px;
display: inline-block;
float: none;
margin: 0 auto;
padding: 0;
}
#carerra {
width: 500px;
height: auto;
margin: 0 auto;
padding: 0;
float: none;
display: inline-block;
}

<ul id="example4">
<li class="active">
<h3 class="accord">Exterior Colors</h3>
<div class="panel loading">
<h5 class="option-subhead">Standard Colors</h5>
<input id="exterior-swatch1" data-id="1" type="button" value=" " class="swatch" />
<input id="exterior-swatch2" data-id="2" type="button" value=" " class="swatch" />
<input id="exterior-swatch3" data-id="3" type="button" value=" " class="swatch" />
<input id="exterior-swatch4" data-id="4" type="button" value=" " class="swatch" />
<h5 class="option-subhead">Metallic Colors</h5>
<input id="exterior-swatch5" data-id="5" type="button" value=" " class="swatch" />
<input id="exterior-swatch6" data-id="6" type="button" value=" " class="swatch" />
<input id="exterior-swatch7" data-id="7" type="button" value=" " class="swatch" />
<input id="exterior-swatch8" data-id="8" type="button" value=" " class="swatch" /><br>
<input id="exterior-swatch9" data-id="9" type="button" value=" " class="swatch" />
<input id="exterior-swatch10" data-id="10" type="button" value=" " class="swatch" />
<input id="exterior-swatch11" data-id="11" type="button" value=" " class="swatch" />
<input id="exterior-swatch12" data-id="12" type="button" value=" " class="swatch" />
<h5 class="option-subhead">Special Colors</h5>
<input id="exterior-swatch13" data-id="13" type="button" value=" " class="swatch" />
<input id="exterior-swatch14" data-id="14" type="button" value=" " class="swatch" />
<input id="exterior-swatch15" data-id="15" type="button" value=" " class="swatch" />
<input id="exterior-swatch16" data-id="16" type="button" value=" " class="swatch" />
</div>
</li>
<li>
<h3 class="accord">Wheel Options</h3>
<div class="panel loading">
<img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel1.png" alt="Wheel Option 1" id="wheel1" data-id="1" class="wheels" />
<img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel2.png" alt="Wheel Option 2" id="wheel2" data-id="2" class="wheels" />
<img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel3.png" alt="Wheel Option 3" id="wheel3" data-id="3" class="wheels" />
<img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel4.png" alt="Wheel Option 4" id="wheel4" data-id="4" class="wheels" />
<img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/wheels/wheel5.png" alt="Wheel Option 5" id="wheel5" data-id="5" class="wheels" />
</div>
</li>
<div id="car">
<img src="https://www.sanjosecoder.com/porsche-working/images/carerra-s/color1-option1.png" alt="911 Carerra S" id="carerra" />
</div>

这是你对上面列出的代码的摆弄。。。JSFiddle