Javascript 如何根据以前的选择进行选择？

作为一个学习练习，我正在构建一个汽车制造商页面，希望选择汽车颜色，然后选择车轮样式，汽车图片会发生变化，以反映每个独特的颜色/车轮组合。有16种颜色和5种轮子样式，我有一张代表每个独特值的图片

我能够制定出第一步，分别选择汽车颜色和车轮选项。例如，如果我单击红色汽车颜色，我希望在循环查看车轮选项时颜色保持不变。当前，它默认返回黑色，然后仅在黑色的轮子上循环

我无法理解应该用来实现这样一个简单的两个选项组合的一般逻辑，我尝试用一个变量捕获所选选项，将其带到控制盘选择中，这会破坏功能。有人能给我指出正确的大致方向吗

以下是处于当前状态的页面-

我知道为什么代码不起作用，但我不知道如何开始将这两种选择结合起来

我们将非常感谢您的指导

Button code:
<ul id="example4" class="accordion">
<li class="active">
<h3 class="accord">Exterior Colors</h3>
<div class="panel loading">
<h5 class="option-subhead">Standard Colors</h5>  
<input id="exterior-swatch1" type="button" value=" " onclick="color1()" class="swatch" /> 
<input id="exterior-swatch2" type="button" value=" " onclick="color2()" class="swatch" />   
<input id="exterior-swatch3" type="button" value=" " onclick="color3()" class="swatch" />    
<input id="exterior-swatch4" type="button" value=" " onclick="color4()" class="swatch" />   
<h5 class="option-subhead">Metallic Colors</h5>
<input id="exterior-swatch5" type="button" value=" " onclick="color5()" class="swatch" />    
<input id="exterior-swatch6" type="button" value=" " onclick="color6()" class="swatch" />   
<input id="exterior-swatch7" type="button" value=" " onclick="color7()" class="swatch" />    
<input id="exterior-swatch8" type="button" value=" " onclick="color8()" class="swatch" /><br>
<input id="exterior-swatch9" type="button" value=" " onclick="color9()" class="swatch" />    
<input id="exterior-swatch10" type="button" value=" " onclick="color10()" class="swatch" />   
<input id="exterior-swatch11" type="button" value=" " onclick="color11()" class="swatch" />    
<input id="exterior-swatch12" type="button" value=" " onclick="color12()" class="swatch" />  
<h5 class="option-subhead">Special Colors</h5>
<input id="exterior-swatch13" type="button" value=" " onclick="color13()" class="swatch" />    
<input id="exterior-swatch14" type="button" value=" " onclick="color14()" class="swatch" />   
<input id="exterior-swatch15" type="button" value=" " onclick="color15()" class="swatch" />    
<input id="exterior-swatch16" type="button" value=" " onclick="color16()" class="swatch" />
</div>
</li>

<li>
<h3 class="accord">Wheel Options</h3>   
<div class="panel loading">
<img src="images/carerra-s/wheels/wheel1.png" alt="Wheel Option 1" id="wheel1" class="wheels" onclick="wheeloption1()" />
<img src="images/carerra-s/wheels/wheel2.png" alt="Wheel Option 2" id="wheel2" class="wheels" onclick="wheeloption2()" />
<img src="images/carerra-s/wheels/wheel3.png" alt="Wheel Option 3" id="wheel3" class="wheels" onclick="wheeloption3()" />
<img src="images/carerra-s/wheels/wheel4.png" alt="Wheel Option 4" id="wheel4" class="wheels" onclick="wheeloption4()" />
<img src="images/carerra-s/wheels/wheel5.png" alt="Wheel Option 5" id="wheel5" class="wheels" onclick="wheeloption5()" />
</div>
</li>
</ul>



3 Examples of a total of 16 for all the colors...

<script>
function color1() {
document.getElementById("carerra").src = 'images/carerra-s/exterior/View3-Color1.png';
document.getElementById("exterior-swatch1").style = 'background-image: url("images/swatches/exterior/exterior-color1-checked.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("images/swatches/exterior/exterior-color16.png");';
var colorPath = 'images/carerra-s/wheels/color1';
}

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

  <!-- - - - - - - -  WHEEL SCRIPTS STUFF - - - - - - -->

function wheeloption1() 

{document.getElementById（“carerra”）.src='images/carerra-s/wheels/color1-option2.png'； document.getElementById（“wheel2”）.src='images/carerra-s/wheels/wheel2 checked.png'； document.getElementById（“wheel1”）.src='images/carerra-s/wheels/wheel1.png'； document.getElementById（“wheel3”）.src='images/carerra-s/wheels/wheel3.png'； document.getElementById（“wheel4”）.src='images/carerra-s/wheels/wheel4.png'； document.getElementById（“wheel5”）.src='images/carerra-s/wheels/wheel5.png'；}

function wheeloption2() 

function wheeloption3() 

function wheeloption4() 

function wheeloption5() 

{document.getElementById（“carerra”）.src='images/carerra-s/wheels/color1-option3.png'； document.getElementById（“wheel3”）.src='images/carerra-s/wheels/wheel3 checked.png'； document.getElementById（“wheel1”）.src='images/carerra-s/wheels/wheel1.png'； document.getElementById（“wheel2”）.src='images/carerra-s/wheels/wheel2.png'； document.getElementById（“wheel4”）.src='images/carerra-s/wheels/wheel4.png'； document.getElementById（“wheel5”）.src='images/carerra-s/wheels/wheel5.png'；}

function wheeloption2() 

function wheeloption3() 

function wheeloption4() 

function wheeloption5() 

{document.getElementById（“carerra”）.src='images/carerra-s/wheels/color1-option4.png'； document.getElementById（“wheel4”）.src='images/carerra-s/wheels/wheel4 checked.png'； document.getElementById（“wheel1”）.src='images/carerra-s/wheels/wheel1.png'； document.getElementById（“wheel2”）.src='images/carerra-s/wheels/wheel2.png'； document.getElementById（“wheel3”）.src='images/carerra-s/wheels/wheel3.png'； document.getElementById（“wheel5”）.src='images/carerra-s/wheels/wheel5.png'；}

function wheeloption2() 

function wheeloption3() 

function wheeloption4() 

function wheeloption5() 

{document.getElementById（“carerra”）.src='images/carerra-s/wheels/color1-option5.png'； document.getElementById（“wheel5”）.src='images/carerra-s/wheels/wheel5 checked.png'； document.getElementById（“wheel1”）.src='images/carerra-s/wheels/wheel1.png'； document.getElementById（“wheel2”）.src='images/carerra-s/wheels/wheel2.png'； document.getElementById（“wheel3”）.src='images/carerra-s/wheels/wheel3.png'；

---

document.getElementById（“wheel4”）.src='images/carerra-s/wheels/wheel4.png'；}

很难说没有看到您的代码，但似乎您正在一个函数中更改所有内容，而不是单独设置每个项目的值

例如，您似乎正在使用一个

setStyle（）

函数来设置颜色、车轮、内饰等。所有这些都在一个函数中。您可能想做的是使用单独的函数

setColor（）

，

setWheels（）

，等等，它们只做一件事，不涉及其他样式

编辑： 问题就在这里。在控制盘选择功能中，您正在更改carerra的整个图像：

function wheelOption1() {
    document.getElementById("carerra").src = 'images/carerra-s/wheels/color1-option1.png';
.... }

查看您的

images/carerra-s/wheels

文件夹，位于

color1-option1.png

。您正在将

#carerra

元素的源设置为该图片。重置旧选项并没有什么神奇之处，您的逻辑明确地告诉页面，“当此函数运行时，将显示的图像更改为

color1-option1.png

，这是一个黑色汽车的图像。”

---

不幸的是，“解决问题”比回答为什么会发生这样的问题要复杂得多。我建议您将汽车图像分解为多个组成部分，并为车身、车轮和内饰创建单独的图像。例如，您的车身图像只需编辑车轮和内饰，而车轮和内饰仅显示车轮和内饰。从那里你可以得到一个汽车的

，在这个div中有四个独立的图像，其中包含车身、前轮、后轮和内饰的图像。从那里，所有独立的图像，所以他们是相互重叠的正确。然后，您的功能可以单独更改要更改的图像的源图像，而无需重置任何其他内容。

恐怕仅仅是指向您网站的链接并不能提供有关此问题的大量信息。这是您开始进行一些调试以缩小问题范围的机会。在设置控制盘选项时，请特别关注代码的具体功能。使用浏览器的调试工具逐步完成脚本调试器中的代码，观察有用的运行时值等。您应该能够隔离不执行所需操作的特定操作。如果您不清楚该操作的结果，请在问题中提供相关代码和输入。问题很简单。每当你点击方向盘时，你就是在用所选的方向盘装载黑色汽车。这将覆盖选定的汽车颜色。或者，您需要创建全彩色+全轮类型的汽车图像，并根据所选内容进行设置。如果你已经有了这些图像，那么在滚轮的点击功能上检查所选的颜色并加载相应的图像。感谢各位的反馈