我如何將類添加到div？

Question

這是我的點擊功能。

function toggleActiveClass(e){

    console.log(e);
}

這是我稱之為功能的地方

<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark">

這是它在控制台中返回的輸出

<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark">
   <li>
      <div class="menu-item menu-item--google menu-item--radio">
         <span>...</span>
         <span class="va-middle">
         Personal info
         </span>
      </div>
   </li>
</a>

我想在這個錨標簽里面的div標簽中添加類“active”。

<a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark">
   <li>
      <div class="menu-item menu-item--google menu-item--radio active">
         <span>...</span>
         <span class="va-middle">
         Personal info
         </span>
      </div>
   </li>
</a>

試過用這個

function toggleActiveClass(e){

    e.target.childNodes[1].addClass("active");
}

但它不起作用。 如何將類激活添加到div？ 使用javascript。

Answer 1

它不起作用，因為addClass不是DOM節點的方法。

您需要更改班級列表：

 function toggleActiveClass(link) { let div = link.querySelector('.menu-item'); div.classList.toggle('active'); } 

 .active { color:red; } 

 <a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark"> <li> <div class="menu-item menu-item--google menu-item--radio"> <span>...</span> <span class="va-middle"> Personal info </span> </div> </li> </a> 

我有其他div與活動類我想從該div中刪除活動類？

我必須知道文檔結構的其余部分，但猜測：

function toggleActiveClass(link)
{
  let currentActive = document.querySelector('.menu-item .active');
  currentActive.classList.remove('active');
  let newActive = link.querySelector('.menu-item');
  newActive.classList.add('active');
}

Answer 2

首先，您this傳遞給沒有target的函數。 要獲取目標屬性，您必須傳遞event 。 然后addClass()是一個jQuery方法，要在vanilla JS中添加類，你應該使用classList.add() 。 雖然您應該像以下方式一樣使用toggle() ：

 function toggleActiveClass(el){ //el.querySelector('div').classList.add("active"); el.querySelector('div').classList.toggle("active"); } 

 .active{ color:red; } 

 <a href="#" onclick="toggleActiveClass(this)" class="link--no-decor link--dark"> <li> <div class="menu-item menu-item--google menu-item--radio"> <span>...</span> <span class="va-middle"> Personal info </span> </div> </li> </a> 

Answer 3

而不是這個傳遞事件

<a href="#" onclick="toggleActiveClass(event)" class="link--no-decor link--dark">

這將解決問題