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

问题描述 投票：0回答：1

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

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

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

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

  • 创建一个包含所有 80 个图像路径的数组，并调用适当的一个
  • 在 HTML 中创建 80 个图像标签以将它们放入 DOM 中，设置图像类为 display: 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");';
  }
javascript html css image logic
1个回答
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 中的输入和滚轮元素的数据集属性来确定颜色 index。

例如，以下 HTML 行是可用颜色的第五行，因此我们将为其指定 

data-id
为 
5
：

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

为每个 select-able 元素添加一个 dataset attribute，该元素与插入 SRC 属性所需的正确字符串相对应，以获取从站点回调的正确图像。

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

然后重建 

src
属性以显示您想要显示的正确图像。

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

注意：您需要检索 HTML 中颜色和滚轮的默认设置，这可以在默认 src 字符串上使用几个 

.split
函数来完成。我们使用此方法定义每个 default 轮子和 color，然后每次使用条件触发单击事件时将它们插入。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.