JQuery показывает изображения с идентификатором на основе клика

Question

Я довольно новичок в 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, который работает, но не делает то, что я хочу, в том смысле, что я хочу иметь возможность использовать класс изображения в нижних div #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 кажется ненужной. Любая помощь приветствуется. Как я уже сказал, если это сложная функция, мне может понадобиться помощь в ее понимании. Спасибо!

Answer 1

Замените весь свой jQ-код следующими 5 строками кода и попробуйте добавить новый цвет в html с текущим соглашением об именах, оно должно работать:)

$('#seatColors img, #frameColors img').click(function(e) {
  let target = e.target.id.includes('seat') ? 'seat' : 'frame'
  $('.' + target).hide();
  $('#' + e.target.id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')).show().addClass('color-overlay');

  console.log(target, '#' + e.target.id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame'))
});