Javascript 在元素上切换类

Question

假设我有这个 HTML 结构

<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 切换类，但不将其添加到其他 sType_click div 上？

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

我目前使用这个

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， 提前致谢。

Answer 1

或者你可以用 jquery 使它变得更容易:

$('.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>