元素上的Javascript切换类 [英] Javascript toggle class on element

问题描述

说我有这个HTML结构

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>

如何使用JavaScript在sType_click div上使用customText span BUT切换类而不在其他sType_click 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?

例如，如果我单击customText类之一，则要在其父类sType_click div上切换类，而不添加任何其他类.

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.

我目前正在使用

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

但是这会切换页面上的所有sType_click div 我对jQuery没问题，但我更喜欢纯JavaScript， 预先感谢.

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

推荐答案

或者您可以使用jquery使其变得更加容易:

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>

这篇关于元素上的Javascript切换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！