元素上的Javascript切换类

假设我有这个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>

但这会切换页面上的所有

sType\u单击
div
我同意jQuery，但我更喜欢纯javascript，
提前感谢。
纯JS解决方案：

您应该聆听对
customText
元素的单击，并使用
parentNode
两次获得更高的两个级别。另外，使用
querySelectorAll
获取所有元素（非活动列表，所以在切换类时它不会更新）


var fwcustext=document.queryselectoral（“.sType\u click.customText”）；
对于（fwcustext的var-ct）{//侦听对“.customText”元素的单击
ct.addEventListener（'click'，函数（事件）{
event.target.parentNode.parentNode.classList.toggle（“sType_-click”）；//将类2级别切换到更高级别
})
}
.sType\u单击{
背景色：红色；
}

自定义文本
自定义文本
自定义文本
纯JS解决方案：

您应该聆听对
customText
元素的单击，并使用
parentNode
两次获得更高的两个级别。另外，使用
querySelectorAll
获取所有元素（非活动列表，所以在切换类时它不会更新）


var fwcustext=document.queryselectoral（“.sType\u click.customText”）；
对于（fwcustext的var-ct）{//侦听对“.customText”元素的单击
ct.addEventListener（'click'，函数（事件）{
event.target.parentNode.parentNode.classList.toggle（“sType_-click”）；//将类2级别切换到更高级别
})
}
.sType\u单击{
背景色：红色；
}

自定义文本
自定义文本
自定义文本
或者您可以使用jquery使其变得更简单：


$（'.fw_customText'）。在（'click'，function（）上{
$（this）.closest（.sType_click”）.toggleClass（“sOpen”）；
});
.sOpen{
背景颜色：绿色；
}

自定义文本
自定义文本
自定义文本
或者您可以使用jquery使其变得更简单：


$（'.fw_customText'）。在（'click'，function（）上{
$（this）.closest（.sType_click”）.toggleClass（“sOpen”）；
});
.sOpen{
背景颜色：绿色；
}

自定义文本
自定义文本
自定义文本
很简单，只需将事件单击添加到对象中即可

es:

这很简单，只需在对象中添加一个事件单击即可

es:

您可以使用simple JS获取所有元素并访问要访问的父元素：


Array.from（document.queryselectoral（.fw\u customText））.forEach（（el）=>{
el.addEventListener（'单击'，（事件）=>{
event.currentTarget.parentElement.parentElement.classList.toggle（“sType_click”）；
});
});
.sType\u单击{
背景颜色：黄色；
}

自定义文本
自定义文本
自定义文本
您可以使用simple JS获取所有元素并访问要访问的父元素：


Array.from（document.queryselectoral（.fw\u customText））.forEach（（el）=>{
el.addEventListener（'单击'，（事件）=>{
event.currentTarget.parentElement.parentElement.classList.toggle（“sType_click”）；
});
});
.sType\u单击{
背景颜色：黄色；
}

自定义文本
自定义文本
自定义文本
我认为您使用jQuery是因为与javascript相比，它需要更少的代码

检查以下代码段：


$（文档）.on（'click'，'customText'，function（））{
$（此）.closest（.sType_click”）.toggleClass（“选定”）；
});
。已选定{
颜色：红色；
}

自定义文本
自定义文本
自定义文本
我认为您使用jQuery是因为与javascript相比，它需要更少的代码

检查以下代码段：


$（文档）.on（'click'，'customText'，function（））{
$（此）.closest（.sType_click”）.toggleClass（“选定”）；
});
。已选定{
颜色：红色；
}

自定义文本
自定义文本
自定义文本
为什么还要检索这些元素
var sType\u click=document.queryselectoral（“.sType\u click”），
它们似乎没有被使用anywhere@quirimmo在这个html结构中，我们总是需要在包装器上切换类，所以我认为没有必要，除非问题作者另有说明。@Qurimmo我已经更新了答案，所以它变得更常见，下面是您的评论。谢谢：）很抱歉，我忘了在我的帖子上写一些类名，我已经修复了它，但我想我会使用jQuery@SilverSurfer posted:）再次感谢您。为什么还要检索这些元素
var sType\u click=document.queryselectoral（“.sType\u click”），
它们似乎没有被使用anywhere@quirimmo在这个html结构中，我们总是需要在包装器上切换类，所以我认为没有必要，除非问题作者另有说明。@Qurimmo我已经更新了答案，所以它变得更常见，下面是您的评论。谢谢：）对不起，我忘了在我的帖子上写一些类名，我已经修复了它，但我想我会使用jQuery@SilverSurfer posted:）再次感谢你。IE/Edge不支持
。forEach
用于
节点列表
：是的数组。from允许支持IE tooIE/Edge不支持
。forEach
用于
节点列表
：是的数组。from也允许支持IE
var sType_click = document.querySelector(".sType_click"),
customText = document.querySelector(".customText"),
if (null !== document.querySelector(".customText")) {
    customText.onclick = function() {
        sType_click.classList.toggle("sOpen");
    };
}

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