元素上的Javascript切换类

Question

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.

Answer 1

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> 

Answer 2

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> 

Answer 3

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");
         };
      } 
}

Answer 4

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> 

Answer 5

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>