JQuery show images with id based on click (take 2)JQuery show images with id based on clickIs there an “exists” function for jQuery?How do I detect a click outside an element?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?Disable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?

Found a minor bug, affecting 1% of users. What should QA do?

Why did they use ultrafast diodes in a 50 or 60 Hz bridge?

How to level a picture frame hung on a single nail?

Canteen Cutlery Issue

Search for something difficult to count/estimate

Are there types of animals that can't make the trip to space? (physiologically)

Why does the Pilatus PC-24 have such a large "Wing Support"?

Does Bank Manager's discretion still exist in Mortgage Lending

Bothered by watching coworkers slacking off

How to "Start as close to the end as possible", and why to do so?

Quote to show students don't have to fear making mistakes

Notation clarity question for a conglomerate of accidentals

Can a passenger predict that an airline or a tour operator is about to go bankrupt?

What is the difference between increasing volume and increasing gain?

What makes a character irredeemable?

French license plates

Can I bring this power bank on board the aircraft?

Where does the image of a data connector as a sharp metal spike originate from?

As a team leader is it appropriate to bring in fundraiser candy?

Is the "spacetime" the same thing as the mathematical 4th dimension?

Digital Bananas

Mac disaster! No longer boots - can’t finish my uni stuff

Compute the price of a derivative

Why is music is taught by reading sheet music?



JQuery show images with id based on click (take 2)


JQuery show images with id based on clickIs there an “exists” function for jQuery?How do I detect a click outside an element?Add table row in jQueryHow do I check if an element is hidden in jQuery?Setting “checked” for a checkbox with jQuery?How to check whether a checkbox is checked in jQuery?Disable/enable an input with jQuery?How can I refresh a page with jQuery?jQuery scroll to element“Thinking in AngularJS” if I have a jQuery background?






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;









1















A couple of months ago I asked this question. I want to add an identical div with a different background. I'm wondering why the jQuery doesn't function in the second div? I'm seeing that the images show and hide in the first div only even when I click the little images in the second 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.






jquery







share|improve this question


























  • Please edit you question and create a minimal reproducible example using the snippet editor

    – mplungjan
    Mar 28 at 20:23











  • I have copied the snippet to your question. Please modify the HTML to what you mean

    – mplungjan
    Mar 28 at 20:26











  • Thanks for the edit. In your edit of my post, I want to add another div like the html, but with different images just below the one posted. But the jQuery doesn't do anything in the second div, using the same setup. I'll grab the code.

    – Burlyn84
    Mar 28 at 20:28












  • You're setting the target variable to "seat" or "frame" and then hiding elements with that class. But there are no elements with the class "seat" or "frame" to hide.

    – sean
    Mar 28 at 20:28












  • Don’t tell me, show me. Add html and you can get images from placeholder.com

    – mplungjan
    Mar 28 at 20:29

















1















A couple of months ago I asked this question. I want to add an identical div with a different background. I'm wondering why the jQuery doesn't function in the second div? I'm seeing that the images show and hide in the first div only even when I click the little images in the second 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.






jquery







share|improve this question


























  • Please edit you question and create a minimal reproducible example using the snippet editor

    – mplungjan
    Mar 28 at 20:23











  • I have copied the snippet to your question. Please modify the HTML to what you mean

    – mplungjan
    Mar 28 at 20:26











  • Thanks for the edit. In your edit of my post, I want to add another div like the html, but with different images just below the one posted. But the jQuery doesn't do anything in the second div, using the same setup. I'll grab the code.

    – Burlyn84
    Mar 28 at 20:28












  • You're setting the target variable to "seat" or "frame" and then hiding elements with that class. But there are no elements with the class "seat" or "frame" to hide.

    – sean
    Mar 28 at 20:28












  • Don’t tell me, show me. Add html and you can get images from placeholder.com

    – mplungjan
    Mar 28 at 20:29













1












1








1








A couple of months ago I asked this question. I want to add an identical div with a different background. I'm wondering why the jQuery doesn't function in the second div? I'm seeing that the images show and hide in the first div only even when I click the little images in the second 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.






jquery







share|improve this question
















A couple of months ago I asked this question. I want to add an identical div with a different background. I'm wondering why the jQuery doesn't function in the second div? I'm seeing that the images show and hide in the first div only even when I click the little images in the second 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.






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





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





jquery




jquery






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 28 at 21:13







Burlyn84

















asked Mar 28 at 20:20









Burlyn84Burlyn84

519 bronze badges




519 bronze badges















  • Please edit you question and create a minimal reproducible example using the snippet editor

    – mplungjan
    Mar 28 at 20:23











  • I have copied the snippet to your question. Please modify the HTML to what you mean

    – mplungjan
    Mar 28 at 20:26











  • Thanks for the edit. In your edit of my post, I want to add another div like the html, but with different images just below the one posted. But the jQuery doesn't do anything in the second div, using the same setup. I'll grab the code.

    – Burlyn84
    Mar 28 at 20:28












  • You're setting the target variable to "seat" or "frame" and then hiding elements with that class. But there are no elements with the class "seat" or "frame" to hide.

    – sean
    Mar 28 at 20:28












  • Don’t tell me, show me. Add html and you can get images from placeholder.com

    – mplungjan
    Mar 28 at 20:29

















  • Please edit you question and create a minimal reproducible example using the snippet editor

    – mplungjan
    Mar 28 at 20:23











  • I have copied the snippet to your question. Please modify the HTML to what you mean

    – mplungjan
    Mar 28 at 20:26











  • Thanks for the edit. In your edit of my post, I want to add another div like the html, but with different images just below the one posted. But the jQuery doesn't do anything in the second div, using the same setup. I'll grab the code.

    – Burlyn84
    Mar 28 at 20:28












  • You're setting the target variable to "seat" or "frame" and then hiding elements with that class. But there are no elements with the class "seat" or "frame" to hide.

    – sean
    Mar 28 at 20:28












  • Don’t tell me, show me. Add html and you can get images from placeholder.com

    – mplungjan
    Mar 28 at 20:29
















Please edit you question and create a minimal reproducible example using the snippet editor

– mplungjan
Mar 28 at 20:23





Please edit you question and create a minimal reproducible example using the snippet editor

– mplungjan
Mar 28 at 20:23













I have copied the snippet to your question. Please modify the HTML to what you mean

– mplungjan
Mar 28 at 20:26





I have copied the snippet to your question. Please modify the HTML to what you mean

– mplungjan
Mar 28 at 20:26













Thanks for the edit. In your edit of my post, I want to add another div like the html, but with different images just below the one posted. But the jQuery doesn't do anything in the second div, using the same setup. I'll grab the code.

– Burlyn84
Mar 28 at 20:28






Thanks for the edit. In your edit of my post, I want to add another div like the html, but with different images just below the one posted. But the jQuery doesn't do anything in the second div, using the same setup. I'll grab the code.

– Burlyn84
Mar 28 at 20:28














You're setting the target variable to "seat" or "frame" and then hiding elements with that class. But there are no elements with the class "seat" or "frame" to hide.

– sean
Mar 28 at 20:28






You're setting the target variable to "seat" or "frame" and then hiding elements with that class. But there are no elements with the class "seat" or "frame" to hide.

– sean
Mar 28 at 20:28














Don’t tell me, show me. Add html and you can get images from placeholder.com

– mplungjan
Mar 28 at 20:29





Don’t tell me, show me. Add html and you can get images from placeholder.com

– mplungjan
Mar 28 at 20:29












1 Answer
1






active

oldest

votes


















2
















If your code works, I suggest you do not have two sets. If you insist the changes are quite intrusive



Here is what I did so far.
Notice I work with class and closest so I changed all DIV IDs to class and all IDs on the images to data-id. I have extracted some changes to the CSS, it is cascading in a complex way. 






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








share|improve this answer



























  • I can't get this to work.

    – Burlyn84
    Mar 29 at 2:02











  • Thanks for what you've done. The data-id and classes seem to do what's expected. Everything works when I remove the .closest selector. But of course, it shows and hides the selected colors in both divs. If you have time and feel like it, could you help me understand what this line is doing? "[data-id=' + id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')+']';"

    – Burlyn84
    Mar 29 at 10:53







  • 1





    You're the best. The .visualizer class does indeed solve all the problems!

    – Burlyn84
    Mar 29 at 10:57






  • 1





    I updated with a comment on the selector constructor

    – mplungjan
    Mar 29 at 11:05













Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);














draft saved

draft discarded
















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55406233%2fjquery-show-images-with-id-based-on-click-take-2%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









2
















If your code works, I suggest you do not have two sets. If you insist the changes are quite intrusive



Here is what I did so far.
Notice I work with class and closest so I changed all DIV IDs to class and all IDs on the images to data-id. I have extracted some changes to the CSS, it is cascading in a complex way. 






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








share|improve this answer



























  • I can't get this to work.

    – Burlyn84
    Mar 29 at 2:02











  • Thanks for what you've done. The data-id and classes seem to do what's expected. Everything works when I remove the .closest selector. But of course, it shows and hides the selected colors in both divs. If you have time and feel like it, could you help me understand what this line is doing? "[data-id=' + id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')+']';"

    – Burlyn84
    Mar 29 at 10:53







  • 1





    You're the best. The .visualizer class does indeed solve all the problems!

    – Burlyn84
    Mar 29 at 10:57






  • 1





    I updated with a comment on the selector constructor

    – mplungjan
    Mar 29 at 11:05
















2
















If your code works, I suggest you do not have two sets. If you insist the changes are quite intrusive



Here is what I did so far.
Notice I work with class and closest so I changed all DIV IDs to class and all IDs on the images to data-id. I have extracted some changes to the CSS, it is cascading in a complex way. 






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








share|improve this answer



























  • I can't get this to work.

    – Burlyn84
    Mar 29 at 2:02











  • Thanks for what you've done. The data-id and classes seem to do what's expected. Everything works when I remove the .closest selector. But of course, it shows and hides the selected colors in both divs. If you have time and feel like it, could you help me understand what this line is doing? "[data-id=' + id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')+']';"

    – Burlyn84
    Mar 29 at 10:53







  • 1





    You're the best. The .visualizer class does indeed solve all the problems!

    – Burlyn84
    Mar 29 at 10:57






  • 1





    I updated with a comment on the selector constructor

    – mplungjan
    Mar 29 at 11:05














2














2










2









If your code works, I suggest you do not have two sets. If you insist the changes are quite intrusive



Here is what I did so far.
Notice I work with class and closest so I changed all DIV IDs to class and all IDs on the images to data-id. I have extracted some changes to the CSS, it is cascading in a complex way. 






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








share|improve this answer















If your code works, I suggest you do not have two sets. If you insist the changes are quite intrusive



Here is what I did so far.
Notice I work with class and closest so I changed all DIV IDs to class and all IDs on the images to data-id. I have extracted some changes to the CSS, it is cascading in a complex way. 






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








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





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






share|improve this answer














share|improve this answer



share|improve this answer








edited Mar 29 at 13:34

























answered Mar 28 at 21:51









mplungjanmplungjan

96.7k23 gold badges134 silver badges192 bronze badges




96.7k23 gold badges134 silver badges192 bronze badges















  • I can't get this to work.

    – Burlyn84
    Mar 29 at 2:02











  • Thanks for what you've done. The data-id and classes seem to do what's expected. Everything works when I remove the .closest selector. But of course, it shows and hides the selected colors in both divs. If you have time and feel like it, could you help me understand what this line is doing? "[data-id=' + id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')+']';"

    – Burlyn84
    Mar 29 at 10:53







  • 1





    You're the best. The .visualizer class does indeed solve all the problems!

    – Burlyn84
    Mar 29 at 10:57






  • 1





    I updated with a comment on the selector constructor

    – mplungjan
    Mar 29 at 11:05


















  • I can't get this to work.

    – Burlyn84
    Mar 29 at 2:02











  • Thanks for what you've done. The data-id and classes seem to do what's expected. Everything works when I remove the .closest selector. But of course, it shows and hides the selected colors in both divs. If you have time and feel like it, could you help me understand what this line is doing? "[data-id=' + id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')+']';"

    – Burlyn84
    Mar 29 at 10:53







  • 1





    You're the best. The .visualizer class does indeed solve all the problems!

    – Burlyn84
    Mar 29 at 10:57






  • 1





    I updated with a comment on the selector constructor

    – mplungjan
    Mar 29 at 11:05

















I can't get this to work.

– Burlyn84
Mar 29 at 2:02





I can't get this to work.

– Burlyn84
Mar 29 at 2:02













Thanks for what you've done. The data-id and classes seem to do what's expected. Everything works when I remove the .closest selector. But of course, it shows and hides the selected colors in both divs. If you have time and feel like it, could you help me understand what this line is doing? "[data-id=' + id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')+']';"

– Burlyn84
Mar 29 at 10:53






Thanks for what you've done. The data-id and classes seem to do what's expected. Everything works when I remove the .closest selector. But of course, it shows and hides the selected colors in both divs. If you have time and feel like it, could you help me understand what this line is doing? "[data-id=' + id.replace(target, '').toLowerCase() + (target === 'seat' ? 'Back' : 'Frame')+']';"

– Burlyn84
Mar 29 at 10:53





1




1





You're the best. The .visualizer class does indeed solve all the problems!

– Burlyn84
Mar 29 at 10:57





You're the best. The .visualizer class does indeed solve all the problems!

– Burlyn84
Mar 29 at 10:57




1




1





I updated with a comment on the selector constructor

– mplungjan
Mar 29 at 11:05






I updated with a comment on the selector constructor

– mplungjan
Mar 29 at 11:05





















draft saved

draft discarded















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55406233%2fjquery-show-images-with-id-based-on-click-take-2%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

Image
Pages using ISBN magic linksMbegu za lughaKamusiIsimu nenoKiarabukitabulughaKiswahilialfabetimaanaufafanuzimanenomuhtasarisarufividahizoalfabeti Kamusi Kutoka Wikipedia, kamusi elezo huru Jump to navigation Jump to search Kamusi za Kiswahili Kamusi ya Kiswahili-Kiswahili (kamusi wahidiya) Kamusi ya Kiswahili - Kiingereza (kamusi thania) Kamusi (kutoka neno la Kiarabu قاموس qamus ) ni kitabu ambacho kinaorodhesha maneno ya lugha yaliyokusanywa kutoka kwa watumiaji wa lugha fulani, kwa mfano lugha ya Kiswahili. Maneno hupangwa kwa mtindo wa alfabeti, hutoa maana, asili na ufafanuzi wa utumizi wa maneno na jinsi yanavyotumika au yanavyotamkwa. [1] Yaliyomo 1 Aina za kamusi 2 Muundo wa kamusi 2.1 1. Utangulizi wa kamusi 2.2 2. Matini ya kamusi 2.3 3. Sherehe ya kamusi 3 Faida za kamusi 4 Dhima ya picha katika kamusi 5 Marejeo 6 Tazama pia 7 Viungo vya nje Aina za kamusi | Kuna aina mbalimbali za kamusi ambazo ni: Kamusi wahidiya yaani ya l
Read more

Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

Image
Strange use of "whether ... than ..." in official text Could a dragon use its wings to swim? Car headlights in a world without electricity How to avoid supervisors with prejudiced views? Is the offspring between a demon and a celestial possible? If so what is it called and is it in a book somewhere? Can I board the first leg of the flight without having final country's PR card? subequations: How to continue numbering within subequation? How do you define an element with an ID attribute using LWC? Relevant Part for a Badminton Serve What CSS properties can the br tag have? What are the unusually-enlarged wing sections on this P-38 Lightning? Why did early computer designers eschew integers? Is it a bad idea to plug the other end of ESD strap to wall ground? Magento 1.9 observer on only new product added ( no updated product ) Airplane gently rocking its wings during whole flight It is correct to match light sources with the same color temperat
Read more

Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript

Image
What steps should I take to lawfully visit the United States as a tourist immediately after visiting on a B-1 visa? Would dual wielding daggers be a viable choice for a covert bodyguard? For a hashing function like MD5, how similar can two plaintext strings be and still generate the same hash? Using Newton's shell theorem to accelerate a spaceship Why doesn't sea level show seasonality? What prevents someone from claiming to be the murderer in order to get the real murderer off? Has anyone in space seen or photographed a simple laser pointer from Earth? What does (void *)1 mean Why does the U.S. tolerate foreign influence from Saudi Arabia and Israel on its domestic policies while not tolerating that from China or Russia? Modulus Operandi What's the point of having a RAID 1 configuration over incremental backups to a secondary drive? How to ask for a LinkedIn endorsement? Good resources for solving techniques (Metaheuristics, MILP, CP etc) How woul
Read more