Can I use jQuery to target instances of a CSS class independently?

Question

I'm looking to use jQuery to change the background color of a div on click (which I've got working!) However one click changes all of the divs color at that point, I'm wondering if there is any way to change the color for the specific element that has been clicked without affecting the others?

$(document).ready(function() {
  $(".bg").click(function() {
    $(".bg").css("background-color", "red");
  });
});

.bg {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg">
  <p id="demo" onclick="colorSwitch()">Click me to change my text color.</p>
</div>
<div class="bg">
  <p id="demo" onclick="colorSwitch()">Click me to change my text color.</p>
</div>
<div class="bg">
  <p id="demo" onclick="colorSwitch()">Click me to change my text color.</p>
</div>
<p>A function is triggered when the div element is clicked. The function sets the background-color of the div element to red.</p>

Also JSFiddle is here: https://jsfiddle.net/davywest1000/jd82hq5t/2/

Thanks in advance!

Zakaria Acharki · Accepted Answer · 2018-09-12 09:03:13Z

4

You have just to use $(this) keyword to refer to the clicked element.

NOTE: Remove the inline event onclick="colorSwitch()" since you have already attached the event in your JS code and if you want to call the function colorSwitch you could call it inside the event.

$(document).ready(function() {
  $(".bg").click(function() {
    $(this).css("background-color", "red");
  });
});

.bg {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bg">
  <p id="demo">Click me to change my text color.</p>
</div>

<div class="bg">
  <p id="demo">Click me to change my text color.</p>
</div>

<div class="bg">
  <p id="demo">Click me to change my text color.</p>
</div>

edited Sep 12, 2018 at 9:03

answered Sep 12, 2018 at 8:56

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

1 Comment

D. West Over a year ago

Ahh excellent I'd been trying 'this' but mustn't have found the correct location! Thank you very much!!!!

Collectives™ on Stack Overflow

Can I use jQuery to target instances of a CSS class independently?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related