时间戳

首页 > 解决方案 > 如何使用javascript检查元素是否具有类

javascript - 如何使用javascript检查元素是否具有类

问题描述

我正在尝试使用 javascript 来确定一个元素是否有一个类，然后将其删除，但我似乎无法让它工作。

类名show具有属性display: block;

var drop = document.getElementsByClassName('dropdown');
var link = document.getElementsByClassName('faculties')
var i


for (let i = 0; i < link.length; i++) {
  link[i].addEventListener('click', () => {
      var present = drop.classList.contains('show');
      if (present == true) {
        // drop.classList.remove('show')
        alert('hi')
        drop[i].classList.toggle("show");

      });
  }
<div class="right programmes">
  <div class="widget">
    <h1>Our Programmes and Courses</h1>
  </div>
  <div class="widget">
    <div class="faculties">
      <a>Faculty of Physical Sciences <i class="fas fa-chevron-down"></i></a>
      <div class="dropdown">
        <h1>Faculty Stuff</h1>
      </div>
    </div>
    <div class="faculties">
      <a>Faculty of Biological Sciences <i class="fas fa-chevron-down"></i></a>
      <div class="dropdown">
        <h1>Faculty Stuff</h1>
      </div>
    </div>
    <div class="faculties">
      <a>Faculty of Health Sciences <i class="fas fa-chevron-down"></i></a>
      <div class="dropdown">
        <h1>Faculty Stuff</h1>
      </div>
    </div>
  </div>
</div>

标签： javascripthtmlcss

解决方案

在此处使用hidden（并将其添加为 HTML 上的布尔属性以反映初始状态）：

const faculties = document.querySelectorAll('.faculties');
const dropdowns = document.querySelectorAll('.dropdown');

for (const faculty of faculties) {
  faculty.addEventListener('click', e => {
    for (const dropdown of dropdowns) {
      dropdown.hidden = ![...faculty.children].includes(dropdown);
    }
  })
}
<div class="right programmes">
  <div class="widget">
    <h1>Our Programmes and Courses</h1>
  </div>
  <div class="widget">
    <div class="faculties">
      <a>Faculty of Physical Sciences <i class="fas fa-chevron-down"></i></a>
      <div class="dropdown" hidden>
        <h1>Faculty Stuff</h1>
      </div>
    </div>
    <div class="faculties">
      <a>Faculty of Biological Sciences <i class="fas fa-chevron-down"></i></a>
      <div class="dropdown" hidden>
        <h1>Faculty Stuff</h1>
      </div>
    </div>
    <div class="faculties">
      <a>Faculty of Health Sciences <i class="fas fa-chevron-down"></i></a>
      <div class="dropdown" hidden>
        <h1>Faculty Stuff</h1>
      </div>
    </div>
  </div>
</div>

推荐阅读