Как сохранить цвет краски при смене стиля колеса и наоборот? ⇐ CSS

[Anonymous]

Я создаю макет страницы выбора автомобиля, которая поможет мне изучить JavaScript, и мне хотелось бы, чтобы пользователь мог выбирать цвет автомобиля, а затем стиль колес. Цвет автомобиля должен сохраняться при смене стилей колес и наоборот. Я бы хотел, чтобы пользователь мог выбирать стиль колеса, а затем переключаться между цветами, сохраняя выбранный стиль колеса, или выбирать цвет краски, а затем переключаться между колесами.
В настоящее время вы можете выбирать между пятью различными типами колес или шестнадцатью разными цветами, но независимо друг от друга, и мне не удалось придумать логику JavaScript, чтобы связать их вместе.
У меня есть уникальные фотографии всех 16 цветов краски и всех 5 стилей колес, всего 80 изображений.
Вещи, которые я рассматривал/пробовал...

• Создание массива со всеми 80 путями к изображениям и вызов соответствующего.
• Создание 80 тегов изображений в HTML. чтобы получить их в DOM, установите для класса изображения display: none; затем установите display:block; 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-wo ... hecked.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor16.png");';
}


function color2() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-wo ... ption1.png';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... hecked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color1.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor16.png");';
}

function color3() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-wo ... ption1.png';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... hecked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color2.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor16.png");';
}

function color4() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-wo ... ption1.png';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... hecked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color3.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor16.png");';
}

function color5() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-wo ... ption1.png';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... hecked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color4.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor16.png");';
}

function color6() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-wo ... ption1.png';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... hecked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color5.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor16.png");';
}

function color7() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-wo ... ption1.png';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... hecked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color6.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor16.png");';
}

function color8() {
document.getElementById("carerra").src = 'https://www.sanjosecoder.com/porsche-wo ... ption1.png';
document.getElementById("exterior-swatch8").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... hecked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color7.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("https://www.sanjosecoder.com/porsche-wo ... olor16.png");';
}


Подробнее здесь: https://stackoverflow.com/questions/683 ... vice-versa