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 n...
Read more

SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

Image
Does a multiclassed wizard start with a spellbook? Minimizing medical costs with HSA Boss has banned cycling to work because he thinks it's unsafe Is there a typical layout to blocking installed for backing in new construction framing? In the Seventh Seal why does Death let the chess game happen? Why has Novell never written its own boot loader? Should I warn my boss I might take sick leave Why is the saxophone not common in classical repertoire? Is it possible to spoof an IP address to an exact number? Motorcyle Chain needs to be cleaned every time you lube it? Bypass with wrong cvv of debit card and getting OTP Do we have a much compact and generalized version of erase–remove idiom? how can i make this execution plan more efficient? Why did moving the mouse cursor cause Windows 95 to run more quickly? What's the big deal about the Nazgûl losing their horses? Has chattel slavery ever been used as a criminal punishment in the USA since the passag...
Read more

은진 송씨 목차 역사 본관 분파 인물 조선 왕실과의 인척 관계 집성촌 항렬자 인구 같이 보기 각주 둘러보기 메뉴은진 송씨세종실록 149권, 지리지 충청도 공주목 은진현

Image
송씨은진 송씨충청남도 소재 성씨논산시 충청남도논산시은진면한국의 성씨고려송명의회덕 황씨류준고흥 류씨송유조선송준길문묘송시열좌의정문묘종묘송준길송규렴송상기송시열송인수송환기송치규송근수충청남도논산시은진면백제757년충청남도은진군논산군논산시은진면송유 은...
Read more