元素上的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在customText span BUT上切換sType_click div上的類，而不在其他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兩次將其提高2級。 另外，使用querySelectorAll獲取所有元素（非活動列表，因此在切換類時它不會更新）。

 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

或者，您也可以使用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來獲取所有元素並訪問您想要的父元素：

 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>