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

纯JS解决方案：

您应该听取customText元素的点击次数，并使用parentNode两次获得更高的级别。另外，使用querySelectorAll获取所有元素（非实时列表，因此在切换类时不会更新）。

＆＃13;

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

＆＃13;

.sType_click {
   background-color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

或者你可以更轻松地使用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>

Answer 3

简单，只需添加一个事件点击对象

ES：

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

在页面上

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

我认为您使用jQuery，因为与javascript相比，它需要更少的代码。

检查以下代码段：

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

您可以使用简单的JS来获取所有元素并访问您想要的父元素：

＆＃13;

Array.from(document.querySelectorAll(".fw_customText")).forEach((el) => {
  el.addEventListener('click', (event) => {
  event.currentTarget.parentElement.parentElement.classList.toggle("sType_click");
  });
});

＆＃13;

.sType_click{
   background-color: yellow;
}

＆＃13;

<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>

＆＃13;

Javascript在元素上切换类

5 个答案: