Question

我之前读过一些与此相关的主题，但这是我第一次尝试应用它，但是我对于如何检查某个元素是否具有类孩子并向其中添加一些新类感到非常困惑。

说我想在单击后将active类添加到li元素子级。这是我要逐步执行的操作：

单击li元素后检查是否有活动的类
如果没有，则添加active类，如果已经存在，则添加return或不执行任何操作

对于 1号，我读了这个主题check-if-an-element-contains-a-class-in-javascript，但对于如何办理儿童登机感到很困惑

对于数字2 ，我已经为其创建了函数，但是我很困惑必须在代码中放置的位置

这是我的html：

<li id="test" class="additional-menu"><a href="#">Link1</a>
  <ul>
    <li class="active"><a href="#" id="">Home</a></li>
    <li><a href="#">Career</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</li>

这是我的CSS：

.active{
  color: red
}

这是我检查孩子的js：

// This is for check a normal class but I doesn't know how to check a child class element from this

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

var el = document.getElementById('test');

alert(hasClass(el, 'active'));


// I can use this function if it inside button using onClick
// But I got quite confused of how to use it without button

function addClass () {
    var x = document.getElementsById("test")[0]; 
    x.className += ' active';
}

有人可以帮助我理解这一点吗？为了您的想象，我想使用此导航栏，并且当我转到其他路由时，该类仍在那儿，说如果我在home中，我希望该类留在home中，并且我在career中，希望全班都呆在那里。我觉得我已经在那里解决了，但还是没有运气

Answer 1

首先将点击监听器附加到所有点击的直接父级元素。
然后通过遍历所有子元素来删除“活动”类。
最后，将活动类添加到您在点击事件本身中收到的目标中

document.addEventListener('DOMContentLoaded', ()=>{
  // event attached to parent for getting clicks of all child while bubbling
  document.querySelector(".parent").addEventListener("click", (event)=>{
    event.preventDefault(); //prevent default "a" tag redirect
    
    let target = event.target;
    
    if(target.tagName != "A"){
      return; // to make sure only <a> is been clicked
    }
    target = target.parentElement; //make related li as target now
    
    for(let li of target.parentElement.children){ //all child of parent ul
      li.classList.remove("active");
    }
    target.classList.add("active");
  });

});

.active{
  color: red
}

<li id="test" class="additional-menu"><a href="#">Link1</a>
  <ul class="parent">
    <li class="active"><a href="#" id="">Home</a></li>
    <li><a href="#">Career</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</li>

如何检查元素类子级是否具有特定类

1 个答案: