jQuery显示具有ID（基于点击）的图像（拍摄2）

Question

几个月前，我问this question。我想添加一个具有不同背景的相同div。我想知道为什么jQuery在第二个div中不起作用？我看到，即使单击第二格中的小图像，图像也仅在第一格中显示和隐藏。

    $('#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>
    <div id="visualizer">
       <div id="chairContainer">
         <img src="/sites/default/files/color-visualizer/scene21/background.jpg" class="background">
         <img src="/sites/default/files/color-visualizer/scene21/red-seats.png"  id="redBack" class="seat">
         <img src="/sites/default/files/color-visualizer/scene21/black-seats.png"  id="blackBack" class="seat">
         <img src="/sites/default/files/color-visualizer/scene21/blue-seats.png"  id="blueBack" class="seat">
         <img src="/sites/default/files/color-visualizer/scene21/teal-seats.png"  id="tealBack" class="seat">
         <img src="/sites/default/files/color-visualizer/scene21/white-seats.png"  id="whiteBack" class="seat">
         <img src="/sites/default/files/color-visualizer/scene21/ww-seats.png"  id="wwBack" class="seat">
         <img src="/sites/default/files/color-visualizer/scene21/red-frame.png"  id="redFrame" class="frame">
         <img src="/sites/default/files/color-visualizer/scene21/black-frame.png"  id="blackFrame" class="frame">
         <img src="/sites/default/files/color-visualizer/scene21/blue-frame.png"  id="blueFrame" class="frame">
         <img src="/sites/default/files/color-visualizer/scene21/teal-frame.png"  id="tealFrame" class="frame">
         <img src="/sites/default/files/color-visualizer/scene21/white-frame.png"  id="whiteFrame" class="frame">
         <img src="/sites/default/files/color-visualizer/scene21/ww-frame.png"  id="wwFrame" class="frame">
 
     </div>
     <div class="intro">
       <p>Select a seat and back color *</p>
      <div id="seatColors">
        <p><img src="/sites/default/files/color-visualizer/red.png" class="seatColor" id ="seatRed"><br>Red</p>
        <p><img src="/sites/default/files/color-visualizer/black.png" class="seatColor" id ="seatBlack"><br>Black</p>
        <p><img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" id ="seatBlue"><br>Blue</p>
        <p><img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" id ="seatTeal"><br>Teal</p>
        <p><img src="/sites/default/files/color-visualizer/white.png" class="seatColor" id ="seatWhite"><br>White</p>
        <p><img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" id ="seatWw"><br>Weatherwood</p>
    </div>

   <p>Select a frame color *</p>
       <div id="frameColors">
          <p><img src="/sites/default/files/color-visualizer/red.png" class="frameColor" id ="frameRed"><br>Red</p>
        <p><img src="/sites/default/files/color-visualizer/black.png" class="frameColor" id ="frameBlack"><br>Black</p>
        <p><img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" id ="frameBlue"><br>Blue</p>
        <p><img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" id ="frameTeal"><br>Teal</p>
        <p><img src="/sites/default/files/color-visualizer/white.png" class="frameColor" id ="frameWhite"><br>White</p>
        <p><img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" id ="frameWw"><br>Weatherwood</p>
      </div>
      <p>*The color shown on page load is a placeholder gray. It is not one of the colors available for purchase. This is for visualization purposes only. The actual colors may not appear exactly the same. <a href =/dealer-locater">Find and visit a dealer to see the products.</a></p>
      </div>
    </div>

This is the site where I'm trying this.

Answer 1

如果您的代码有效，建议您不要使用两组代码。如果您坚持认为更改是相当麻烦的

这是我到目前为止所做的。 请注意，我使用class和closeest，所以我将所有DIV ID更改为class，并将图像上的所有ID更改为data-id。我已经提取了CSS的一些更改，它以复杂的方式级联。

_plugin/kibana/api/saved_objects/?type=index-pattern&per_page=10000

To create a working debug configuration locate the file 
com.neXtep.Designer/designer.product in the Eclipse project explorer and open   
it. In the "Testing" section of the page that will open, click on "Launch an 
Eclipse application in Debug mode". You're all set!

$('.seatColors img, .frameColors img').click(function(e) {
  let id = e.target.getAttribute("data-id");
  let target = id.includes('seat') ? 'seat' : 'frame'
  const $container= $(this).closest(".visualizer");
  $container.find('.' + target).hide(); // hide all of type
  
  // construct [data-id=whiteSeat] when seatWhite is clicked

  const showSelector = '[data-id=' + 
     id.replace(target, '').toLowerCase() + 
     (target === 'seat' ? 'Back' : 'Frame')+']'; // ternary if target is seat, use Back else use Frame

  console.log(id,target,showSelector);

  $(showSelector,$container).show().addClass('color-overlay');
});