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

ccrfmcuu  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(419)

我想去年我问了这个问题，但我没有做好准备，我的问题表达得也没有我想象的那么好。不管怎样，我有很多人愿意帮忙，我非常感激。这一次，我制作了一把小提琴，希望能让你们更好地帮助我。https://jsfiddle.net/jasonbruce/qwuojxg0/28/
如果需要，这是整页-https://www.sanjosecoder.com/porsche-working/index.html -所有代码都在页面本身上。
我正在制作一个模拟汽车选择器页面来帮助我学习javascript，并希望用户能够选择汽车颜色，然后选择车轮样式。在车轮样式中循环时，应保持车辆颜色，反之亦然。我希望用户能够选择控制盘样式，然后在保持选定控制盘样式的同时循环颜色，或者选择绘制颜色，然后循环控制盘。
目前，您可以在五种不同的轮子类型或十六种不同的颜色之间进行选择，但彼此独立，而我无法想出javascript逻辑将它们联系在一起。
我有所有16种颜色的所有5种车轮样式的独特图片，总共有80张图片。
我考虑/尝试过的事情。。。
创建包含所有80个映像路径的数组，并调用相应的路径
在html中创建80个图像标记以在dom中获取它们，将图像类设置为display:none；然后设置显示：块；onclick
我没能和我的新保姆产生逻辑，我被卡住了。下面是我目前使用的一些逻辑。

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");';
  }
JavaScriptHtmlImagelogiccss

1条答案

按热度按时间
yhqotfr8

yhqotfr81#

通过对可选择的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属性为input和wheel元素确定颜色索引。
例如，下面的html行是可用颜色的第五行，因此我们将给它一个 data-id 属于 5 :

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

为每个select-able元素添加一个datasetattribute，该元素对应于插入src属性以从站点回调正确映像所需的正确字符串。
您所要做的就是创建一个函数来处理两个事件侦听器，一个用于颜色，另一个用于控制盘，每个回调都运行相同的函数来检查事件目标的类。
然后你重建 src 属性以显示要显示的正确图像。 document.getElementById('carerra').src = "https://www.sanjosecoder.com/porsche-working/images/carerra-s/color" + selectedColor + "-option" + wheelOption + ".png"; 注意：您需要在html中检索颜色和控制盘的默认设置，这可以使用以下方法完成： .split 默认src字符串上的函数。我们使用此方法定义每个默认控制盘和颜色，然后在每次使用条件按钮触发单击事件时插入它们。

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 color 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>

这是您对上面列出的代码的修改。。。JSFIDLE

赞(0）分享  回复(0）举报  2021-09-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com