How to change css onclick background

Question

Please check this JSFiddle . There are two divs here called step-wrapper and inside these step-wrapper divs there are three divs called step-box . It is written in such a way that when you click on the step-box div, its background color changes to yellow.

I added a reset button. I need to press the reset button, the color of the last clicked step-box div should change to white. But in this code, when I press the reset button, the entire background color of the step changes to white.

Answer 1

I believe this is what you are looking for: https://jsfiddle.net/richardgirges/8m9qstg3/11/

We save the link to the lastClicked div and target it specifically when we press reset . For instance:

 var $lastClicked = null; $('.step_wrapper').on('click','.step_box',function () { $(this).parent().find('.step_box').css('background-color', ''); $(this).css('background-color', '#fff000'); $lastClicked = $(this); }); $('.reset').on('click',function(){ if ( $lastClicked ) { $lastClicked.css( 'background-color', '#fff' ); $lastClicked = null; } }); 

EDIT: improved code. Using an explicit instance of var to keep it within scope.

Answer 2

It looks strange when you have only one reset button at the very end, but only reset only one wrapper. How about if we add a reset button inside the shell div and only reset that shell when we press each reset? Look, you like it.

HTML:

 <div class="step_wrapper"> <div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span> </p> </div> <div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span> </p> </div> <div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span> </p> </div> <div class="reset"> Reset </div> </div> <br> <br>Second Wrapper <br> <br> <div class="step_wrapper"> <div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span> </p> </div> <div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span> </p> </div> <div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span> </p> </div> <div class="reset"> Reset </div> </div> 

JavaScript:

 $('.step_wrapper').on('click','.step_box',function () { $(this).parent().find('.step_box').css('background-color', ''); $(this).css('background-color', '#eeffaa'); }); $('.reset').on('click',function(){ $( this ).parent().find(".step_box").css( 'background-color', '' ); }); 

Answer 3

Add the class last to the last clicked item and reset this.

 $('.step_wrapper').on('click','.step_box',function () { $(this).parent().find('.step_box').css('background-color', ''); $(this).css('background-color', '#fff000'); $('.last').removeClass('last'); $(this).addClass('last'); }); $('.reset').on('click',function(){ $( ".step_box.last" ).css( 'background-color', '' ); }); 

http://jsfiddle.net/8m9qstg3/7/

Answer 4

See fiddle

What I did, I added the ID attribute for your step_box class and used the ID to set the hidden field when the step_box button was step_box . And later in onClick reset, I used an identifier that is set in a hidden field.

Please code below ..

Js

 $('.step_wrapper').on('click','.step_box',function () { $(this).parent().find('.step_box').css('background-color', ''); $(this).css('background-color', '#fff000'); document.getElementById('test').value=this.id; }); $('.reset').on('click',function(){ var a= document.getElementById('test').value; $( "#"+a ).css( 'background-color', '' ); }); 

HTML

 <div class="step_wrapper"> <div class="step_box" onclick="show('Page1');" id="1"> <span>Content of page 1</span> </p> </div> <div class="step_box" onclick="show('Page2');" id="2"> <span>Content of page 2</span> </p> </div> <div class="step_box" onclick="show('Page3');" id="3"> <span>Content of page 3</span> </p> </div> </div> <br> <br>Second Wrapper <br> <br> <div class="step_wrapper"> <div class="step_box" onclick="show('Page1');" id="4"> <span>Content of page 1</span> </p> </div> <div class="step_box" onclick="show('Page2');" id="5"> <span>Content of page 2</span> </p> </div> <div class="step_box" onclick="show('Page3');" id="6"> <span>Content of page 3</span> </p> </div> </div> <input type="hidden" id="test" /> <div class="reset">Reset</div> 

Answer 5

http://jsfiddle.net/8m9qstg3/6/

I created a variable called last and assigned it a click object. Thus, when you press reset, it will know that the last item has been pressed. If you are looking for multipliers, you can create an array and use .push() to create a string of the last elements clicked, but this should answer your question.

 var last; $('.step_wrapper').on('click','.step_box',function () { $(this).parent().find('.step_box').css('background-color', ''); $(this).css('background-color', '#fff000'); last = this; }); $('.reset').on('click',function(){ $(last).css("background-color", "white"); });`