javascript - 如何根据之前的选择进行选择？
问题描述
对于学习练习，我正在构建一个汽车制造商页面，并希望选择汽车颜色，然后是车轮样式，汽车的图片会发生变化以反映每种独特的颜色/车轮组合。有 16 种颜色和 5 种车轮样式，我有一张代表每个独特价值的图片。
我能够制定出分别选择汽车颜色和车轮选项的第一步。例如，如果我单击红色汽车颜色，我希望颜色在我循环浏览车轮选项时保持不变。目前，它默认恢复为黑色，然后仅在黑色轮子中循环。
我无法理解应该用于处理像这样的简单的两个选项组合的一般逻辑，并且我尝试使用变量捕获所选选项以将其传递到车轮选择的事情破坏了功能。谁能指出我正确的大方向？
这是当前状态的页面 - https://www.sanjosecoder.com/porsche/index.html
我知道为什么代码不起作用 - 但我不知道如何开始布局以将两个选择组合在一起。
任何指导将不胜感激！
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-option1.png'; document.getElementById("wheel1").src = 'images/carerra-s/wheels/wheel1-checked.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'; document.getElementById("wheel5").src = 'images/carerra-s/wheels/wheel5.png';}
function wheeloption2()
{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 wheeloption3()
{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 wheeloption4()
{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 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>你的车，在那个 div 中包含四个单独的图像，其中包含车身、前轮、后轮和内部的图像。从那里，相对位置所有单独的图像，因此它们正确地相互重叠。然后您的功能可以单独更改您想要更改的图像的源图像，并且不需要重置任何其他内容。
推荐阅读
- node.js - TypeORM 建立关系的正确方法，需要帮助
- html - 滑动滑块在移动设备上不响应
- asp.net-core - 导航到新页面时防止 blazors 平滑页面滚动
- javascript - 如何在 Python 中从 Javascript 中读取值
- java - MappedInterceptor Bean 与 WebMvcConfigurer addInterceptors。添加 Spring HandlerInterceptor 的正确（现代）方法是什么？
- html - 为什么 Boostrap 会更改我的 html 布局以及如何恢复原始格式？
- node.js - Node/Vue：从 Node 托管的索引文件创建应用程序还是绕过？
- spring-data-jpa - 在 Spring Reactive Kafka（非阻塞调用）中使用 Spring JPA（阻塞调用）是一种好方法吗？
- javascript - 获取另一个进程的名称和大小
- scala - 我可以告诉 SBT 我不关心某个依赖项的 source/javadoc 吗？