JQuery 根据点击显示带有 id 的图像(采取 2)

Question

几个月前我问过this question 。我想添加一个具有不同背景的相同 div。我想知道为什么 jQuery 在第二个 div 中不起作用？我发现仅当我单击第二个 div 中的小图像时，图像才会在第一个 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 的一些更改，它以复杂的方式级联。

$('.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');
});

.visualizer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around
}

.chairContainer {
  position: relative
}

.chairContainer img {
  width: 100%;
  max-width: 550px
}

.frame,
.seat {
  position: absolute;
  top: 0;
  left: 0;
  display: none
}

.intro .frameColors,
.intro .seatColors {
  display: grid;
  grid-template-columns: repeat(auto-fill, 33px);
  grid-gap: 10px;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto 1em;
  text-align: center
}

.intro .frameColors p,
.intro .seatColors p {
  font-size: 7px
}

.intro .frameColors img,
.intro .seatColors img {
  width: 100%;
  cursor: pointer;
  max-width: 50px
}

<base href="http://seabreeze.otsandbox.com/" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.typekit.net/qje3jyr.css"/>

<div class="visualizer">
  <div class="chairContainer">
    <img src="/sites/default/files/color-visualizer/background.jpg" class="background">
    <img src="/sites/default/files/color-visualizer/seatback-red.png" data-id="redBack" class="seat">
    <img src="/sites/default/files/color-visualizer/seatback-black.png" data-id="blackBack" class="seat">
    <img src="/sites/default/files/color-visualizer/seatback-blue.png" data-id="blueBack" class="seat">
    <img src="/sites/default/files/color-visualizer/seatback-teal.png" data-id="tealBack" class="seat">
    <img src="/sites/default/files/color-visualizer/seatback-white.png" data-id="whiteBack" class="seat">
    <img src="/sites/default/files/color-visualizer/seatback-ww.png" data-id="wwBack" class="seat">
    <img src="/sites/default/files/color-visualizer/frame-red.png" data-id="redFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/frame-black.png" data-id="blackFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/frame-blue.png" data-id="blueFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/frame-teal.png" data-id="tealFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/frame-white.png" data-id="whiteFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/frame-ww.png" data-id="wwFrame" class="frame">
  </div>
  <div class="intro">
    <p>Select a seat and back color</p>
    <div class="seatColors">
      <img src="/sites/default/files/color-visualizer/red.png" class="seatColor" data-id="seatRed">
      <img src="/sites/default/files/color-visualizer/black.png" class="seatColor" data-id="seatBlack">
      <img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" data-id="seatBlue">
      <img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" data-id="seatTeal">
      <img src="/sites/default/files/color-visualizer/white.png" class="seatColor" data-id="seatWhite">
      <img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" data-id="seatWw">
    </div>

    <p>Select a frame color</p>
    <div class="frameColors">
      <img src="/sites/default/files/color-visualizer/red.png" class="frameColor" data-id="frameRed">
      <img src="/sites/default/files/color-visualizer/black.png" class="frameColor" data-id="frameBlack">
      <img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" data-id="frameBlue">
      <img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" data-id="frameTeal">
      <img src="/sites/default/files/color-visualizer/white.png" class="frameColor" data-id="frameWhite">
      <img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" data-id="frameWw">
    </div>
  </div>
</div>

<div class="visualizer">
  <div class="chairContainer">
    <img src="/sites/default/files/color-visualizer/scene21/background.jpg" class="background">
    <img src="/sites/default/files/color-visualizer/scene21/red-seats.png" data-id="redBack" class="seat">
    <img src="/sites/default/files/color-visualizer/scene21/black-seats.png" data-id="blackBack" class="seat">
    <img src="/sites/default/files/color-visualizer/scene21/blue-seats.png" data-id="blueBack" class="seat">
    <img src="/sites/default/files/color-visualizer/scene21/teal-seats.png" data-id="tealBack" class="seat">
    <img src="/sites/default/files/color-visualizer/scene21/white-seats.png" data-id="whiteBack" class="seat">
    <img src="/sites/default/files/color-visualizer/scene21/ww-seats.png" data-id="wwBack" class="seat">
    <img src="/sites/default/files/color-visualizer/scene21/red-frame.png" data-id="redFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/scene21/black-frame.png" data-id="blackFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/scene21/blue-frame.png" data-id="blueFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/scene21/teal-frame.png" data-id="tealFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/scene21/white-frame.png" data-id="whiteFrame" class="frame">
    <img src="/sites/default/files/color-visualizer/scene21/ww-frame.png" data-id="wwFrame" class="frame">

  </div>
  <div class="intro">
    <p>Select a seat and back color *</p>
    <div class="seatColors">
      <p><img src="/sites/default/files/color-visualizer/red.png" class="seatColor" data-id="seatRed"><br>Red</p>
      <p><img src="/sites/default/files/color-visualizer/black.png" class="seatColor" data-id="seatBlack"><br>Black</p>
      <p><img src="/sites/default/files/color-visualizer/blue.png" class="seatColor" data-id="seatBlue"><br>Blue</p>
      <p><img src="/sites/default/files/color-visualizer/teal.png" class="seatColor" data-id="seatTeal"><br>Teal</p>
      <p><img src="/sites/default/files/color-visualizer/white.png" class="seatColor" data-id="seatWhite"><br>White</p>
      <p><img src="/sites/default/files/color-visualizer/weatherwood.png" class="seatColor" data-id="seatWw"><br>Weatherwood</p>
    </div>

    <p>Select a frame color *</p>
    <div class="frameColors">
      <p><img src="/sites/default/files/color-visualizer/red.png" class="frameColor" data-id="frameRed"><br>Red</p>
      <p><img src="/sites/default/files/color-visualizer/black.png" class="frameColor" data-id="frameBlack"><br>Black</p>
      <p><img src="/sites/default/files/color-visualizer/blue.png" class="frameColor" data-id="frameBlue"><br>Blue</p>
      <p><img src="/sites/default/files/color-visualizer/teal.png" class="frameColor" data-id="frameTeal"><br>Teal</p>
      <p><img src="/sites/default/files/color-visualizer/white.png" class="frameColor" data-id="frameWhite"><br>White</p>
      <p><img src="/sites/default/files/color-visualizer/weatherwood.png" class="frameColor" data-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>