jQuery显示基于点击的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，但在某种意义上我并不想做我想做的事情，因为我希望能够在底部div #seatColors和{{1中使用图像的类}}，然后根据ID在#frameColors中显示图像。

jQuery

chairContainer

上面的方法不是最令人满意的原因是因为我们为此而建的公司可能希望添加颜色。添加图像是一回事，但是似乎不必每次都编辑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>