How to change the color of the certain element when there are multiple element with the same class?-CodePudding

I have HTML structure like:

<a >
 <h2 >link</h2>
</a>

<a >
 <h2 >link</h2>
</a>

<a >
 <h2 >link</a>
</a>

I want to add the class to the parent element for clicked link, and for instance, I click on the "link1" then change the background of his parent then when I click on the "link2" add the class to "link2" and remove from "link1"

I was trying with:

     $(".parent-element").addClass("myClass");

But, it's far from what I want to get :)

Thanks in advance!

CodePudding user response：

Use this keyword for adding class to the current element.

$(".parent-element").click(function() {
  $(".parent-element").removeClass("active");
  $(this).addClass("active");
})

.active{
   color: hotpink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<a >
  <h2 >link</h2>
</a>

<a >
  <h2 >link</h2>
</a>

<a >
  <h2 >link</h2>
</a>

CodePudding user response：

you can try this -

$(".parent-element").click(function() {
  $(".parent-element").removeClass("myClass");
  $(this).addClass("myClass");
})

.myClass {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<a >
  <h2 >link</h2>
</a>
<a >
  <h2 >link</h2>
</a>
<a >
  <h2 >link
</a>

CodePudding user response：

you can target the parent with event.target.parentNode.classList.add("clicked") but with your current code, you don't need to target the parent or use js to change the color. Because tag is the clickable element(not h2) and when you click on it, browser knows the event, target element etc.. You can simply create a css class like

a.parent-element:visited {
  color: green;
}

so, you dont even need js for it