Question

我不使用Jquery也不想要，一旦下一个项目被同一类切换，我想再次切换一个类。因此，上一个课程将被删除。并且一次只打开一个类。

我尝试添加document.getElementsByClassName(".panel").removeClass("open"); 该函数首先删除所有已切换的类（“打开”）但这不起作用。我尝试添加一个ID并尝试从该ID中删除一个类仍然无法正常工作

function toggleOpen() {

     document.getElementsByClassName(".panel").removeClass("open");//this give me error
      this.classList.toggle('open');


    }
    function toggleActive(e) {
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }

    }



    const panels = document.querySelectorAll('.panel');
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

结果

Uncaught TypeError: document.getElementsByClassName(...).removeClass is not a function

Answer 1

应该为classList.remove("open")，而不是removeClass("open")

此外，由于getElementsByClassName将返回元素集合，因此您无法一次将其全部从中移除，因此该操作将无效。您必须为面板中的每个元素调用它。

Array.from(document.getElementsByClassName(".panel")).forEach(element => element.classList.remove("open"))

或者无需先将其转换为数组就可以

const panels = document.getElementsByClassName(".panel")
for (let panel of panels) {
  panel.classList.remove("open")
}

Answer 2

由于您要向每个元素添加事件侦听器，因此不需要document.getElementsByClassName(".panel").removeClass("open");。函数内部的this将引用被单击的元素。

removeClass是jquery方法，将不可用。 document.getElementsByClassName返回元素列表，因此您需要对其进行循环。

尝试以下示例。

function toggleColor() {
      this.classList.toggle('red');
}


const panels = document.querySelectorAll('.panel');
panels.forEach(panel => panel.addEventListener('click', toggleColor));

.green {
  color: green;
}
.red {
  color: red;
}

<p class="panel green">H1<p>
<p class="panel red">H2<p>
<p class="panel green">H3<p>
<p class="panel  red">H4<p>

当我们通过点击事件切换另一个班级时，如何删除以前切换的班级

2 个答案: