CODEWITHSUNDEEP
javascriptjqueryhtml
Nippledisaster
Nippledisaster

Reputation: 298

Javascript toggle class on element

Say I have this HTML structure

<div class="sType_click">
    <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
    <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
    <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

How do I use JavaScript to toggle class on sType_click div with the customText span BUT without adding it on other sType_click divs?

For example if I click on one of the customText class I want to toggle class on its parent sType_click div and not adding on any others.

I currently use this

var sType_click = document.querySelector(".sType_click"),
customText = document.querySelector(".customText"),
if (null !== document.querySelector(".customText")) {
    customText.onclick = function() {
        sType_click.classList.toggle("sOpen");
    };
}

But this toggles all sType_click divs on the page I'm okay with jQuery but i prefer pure javascript, Thanks in advance.

Upvotes: 0

Views: 714

Answers (5)

Bhuwan
Bhuwan

Reputation: 16855

I think you use jQuery because it requires less code as compare to javascript.

Check below snippet:

$(document).on('click', '.customText', function() {
  $(this).closest(".sType_click").toggleClass("selected");
});
.selected {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sType_click">
  <div class="Switcher">
    <span class="customText">Custom text</span>
  </div>
</div>

<div class="sType_click">
  <div class="Switcher">
    <span class="customText">Custom text</span>
  </div>
</div>

<div class="sType_click">
  <div class="Switcher">
    <span class="customText">Custom text</span>
  </div>
</div>

Upvotes: 1

quirimmo
quirimmo

Reputation: 9988

You can use simple JS to do that getting all the elements and accessing the parent element you want to: 

Array.from(document.querySelectorAll(".fw_customText")).forEach((el) => {
  el.addEventListener('click', (event) => {
  event.currentTarget.parentElement.parentElement.classList.toggle("sType_click");
  });
});
.sType_click{
   background-color: yellow;
}
<div class="sType_click">
    <div class="Switcher">
      <span class="fw_customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
    <div class="Switcher">
      <span class="fw_customText ">Custom text</span>
    </div>
</div>

<div class="sType_click">
    <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

Upvotes: 0

Egor Stambakio
Egor Stambakio

Reputation: 18136

Pure JS solution:

You should listen for clicks on customText elements and get 2 levels higher using parentNode twice. Also, use querySelectorAll to get all elements (non-live list, so it doesn't update when you toggle class).

var fwcustomText = document.querySelectorAll(".sType_click .customText");
      
for (var ct of fwcustomText) { // listen to clicks on ".customText" elements
  ct.addEventListener('click', function(event) {
    event.target.parentNode.parentNode.classList.toggle("sType_click"); // toggle class 2 levels higher
  })
}
.sType_click {
   background-color: red;
}
<div class="sType_click">
        <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
        <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
        <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

Upvotes: 1

Gianfrancesco Aurecchia
Gianfrancesco Aurecchia

Reputation: 780

its easy, Just add an event click to the object

es:

<div class="sType_click" onclick="sType_click_eve(this)">
    <div class="Switcher">
    <span class="fw_customText">Custom text</span>
</div>

And on the page

function sType_click_eve(ele){
      var sType_click = ele,
      customText = document.querySelector(".customText"),
      if (null !== document.querySelector(".customText")) {
         customText.onclick = function() {
            sType_click.classList.toggle("sOpen");
         };
      } 
}

Upvotes: 1

SilverSurfer
SilverSurfer

Reputation: 4368

Or you can make it with jquery so much easier:

$('.fw_customText').on('click', function() {
     $(this).closest(".sType_click").toggleClass("sOpen");
});
.sOpen{
   background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sType_click">
        <div class="Switcher">
      <span class="fw_customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
        <div class="Switcher">
      <span class="fw_customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
        <div class="Switcher">
      <span class="fw_customText">Custom text</span>
    </div>
</div>

Upvotes: 1

Related Questions