jQuery - Change CSS of one element from many with same class identification

Question

I am working around a simple jQuery script that is changing the backgroud color of an element when clicked.

Here is my code:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<div class="radio">Text1</div>
<div class="radio">Text2</div>
<div class="radio">Text3</div>
<div class="radio">Text4</div>

I want the following to happen:

I click on "Text1" and this div is changing his background color to red and stay red.

I click on "Text2" and the background color of "Text1" is going back to white and then the background color of "Text2" is going and stay red.

I hope i give you a good description.

Can you help me make it ?

Thanks in advance!

Balaji Viswanath · Accepted Answer · 2014-11-04 23:48:26Z

1

$('.radio').click(function(){
  $('.red').removeClass('red');
  $(this).addClass('red');
});

.red{
background-color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="radio">Text1</div>
<div class="radio">Text2</div>
<div class="radio">Text3</div>
<div class="radio">Text4</div>

answered Nov 4, 2014 at 23:48

Balaji Viswanath

1,6841 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Talmid · Accepted Answer · 2014-11-04 23:55:23Z

0

Here is a way to do it with pure CSS:

input {
  display: none;
}
label {
  display: block;
}
input:checked + label {
  background-color: red;
}

<input id="text1" type="radio" name="g1">
<label for="text1">Text1</label>
<input id="text2" type="radio" name="g1">
<label for="text2">Text2</label>
<input id="text3" type="radio" name="g1">
<label for="text3">Text3</label>
<input id="text4" type="radio" name="g1">
<label for="text4">Text4</label>

answered Nov 4, 2014 at 23:55

Talmid

1,44116 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery - Change CSS of one element from many with same class identification

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related