JQuery显示基于click的id的图像

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的工作原理，但是我没有做我想要的事情，因为我希望能够使用底部divs #seatColors和#frameColors中的图像类来实现click功能，然后显示基于id的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

用以下5行代码替换所有jQ代码，并尝试使用当前命名约定在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'))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>