JQuery show images with id based on click

问题

I'm pretty new at JQuery so my knowledge of syntax and functions may need some in depth explaining. Please be patient with me and questions.

I'm building a color visualizer. Basically a stack of images with position:absolute and display:none.

Here's my HTML structure:

<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>

Here is the JQuery that works, but doesn't do what I want it to do in the sense that I want to be able to use the class of the image in the bottom divs #seatColors and #frameColors for the click function and then to show the images in the chairContainer based on the id.

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

The reason the above is not the most satisfactory is because the company we are building this for may want to add colors. It's one thing to add images, but having to edit Jquery every time seems unnecessary. Any help is appreciated. As I said, if it's a complex function, I may need some help understanding it. Thanks!

回答1:

Replace all your jQ code with following 5 lines of code and try adding new color in html with current naming convention,it should work :)

$('#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>

来源：https://stackoverflow.com/questions/53509625/jquery-show-images-with-id-based-on-click