Я довольно новичок в JQuery, поэтому мои знания синтаксиса и функций могут нуждаться в подробном объяснении.Пожалуйста, будьте терпеливы со мной и вопросами.
Я создаю цветной визуализатор.По сути, это стопка изображений с положением: абсолютное и с отображением: нет.
Вот моя структура HTML:
<div id="visualizer">
<div id="chairContainer">
<img src="/sites/default/files/color-visualizer/background.jpg" class="background">
<img src="/sites/default/files/color-visualizer/seatback-red.png" id="redBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-black.png" id="blackBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-blue.png" id="blueBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-teal.png" id="tealBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-white.png" id="whiteBack" class="seat">
<img src="/sites/default/files/color-visualizer/seatback-ww.png" id="wwBack" class="seat">
<img src="/sites/default/files/color-visualizer/frame-red.png" id="redFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-black.png" id="blackFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-blue.png" id="blueFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-teal.png" id="tealFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-white.png" id="whiteFrame" class="frame">
<img src="/sites/default/files/color-visualizer/frame-ww.png" id="wwFrame" class="frame">
</div>
<div class="intro">
<p>Select a seat and back color</p>
<div id="seatColors">
<img src="/sites/default/files/color-visualizer/red.png" class="seatColor" id ="seatRed">
<img src="/sites/default/files/color-visualizer/black.png" class="seatColor" id ="seatBlack">
<img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" id ="seatBlue">
<img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" id ="seatTeal">
<img src="/sites/default/files/color-visualizer/white.png" class="seatColor" id ="seatWhite">
<img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" id ="seatWw">
</div>
<p>Select a frame color</p>
<div id="frameColors">
<img src="/sites/default/files/color-visualizer/red.png" class="frameColor" id ="frameRed">
<img src="/sites/default/files/color-visualizer/black.png" class="frameColor" id ="frameBlack">
<img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" id ="frameBlue">
<img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" id ="frameTeal">
<img src="/sites/default/files/color-visualizer/white.png" class="frameColor" id ="frameWhite">
<img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" id ="frameWw">
</div>
</div>
</div>
Вот JQuery, который работает, но не делает то, что я хочусделать в том смысле, что я хочу иметь возможность использовать класс изображения в нижних divs #seatColors и #frameColors для функции щелчка, а затем показать изображения в chairContainer на основе идентификатора.
Jquery
$('#seatRed').click(function(){
$('.seat').hide();
$('#redBack').show().addClass('color-overlay');
})
$('#seatBlack').click(function(){
$('.seat').hide();
$('#blackBack').show().addClass('color-overlay');
})
$('#seatBlue').click(function(){
$('.seat').hide();
$('#blueBack').show().addClass('color-overlay');
})
$('#seatTeal').click(function(){
$('.seat').hide();
$('#tealBack').show().addClass('color-overlay');
})
$('#seatWhite').click(function(){
$('.seat').hide();
$('#whiteBack').show().addClass('color-overlay');
})
$('#seatWw').click(function(){
$('.seat').hide();
$('#wwBack').show().addClass('color-overlay');
})
$('#frameRed').click(function(){
$('.frame').hide();
$('#redFrame').show().addClass('color-overlay');
})
$('#frameBlack').click(function(){
$('.frame').hide();
$('#blackFrame').show().addClass('color-overlay');
})
$('#frameBlue').click(function(){
$('.frame').hide();
$('#blueFrame').show().addClass('color-overlay');
})
$('#frameTeal').click(function(){
$('.frame').hide();
$('#tealFrame').show().addClass('color-overlay');
})
$('#frameWhite').click(function(){
$('.frame').hide();
$('#whiteFrame').show().addClass('color-overlay');
})
$('#frameWw').click(function(){
$('.frame').hide();
$('#wwFrame').show().addClass('color-overlay');
})
Причина, по которой вышесказанное не является наиболее удовлетворительной, заключается в том, что компания, для которой мы строим это, может захотеть добавить цвета.Одно дело добавлять изображения, но необходимость каждый раз редактировать Jquery кажется ненужной.Любая помощь приветствуется.Как я уже сказал, если это сложная функция, мне может понадобиться помощь в ее понимании.Спасибо!