Question

所以我进入了JavaScript并尝试设置以下场景：

我的网站上有2个按钮（ID是buttonWebdev和buttonUXUI），它们应该在它们悬停时触发。如果挂起了buttonWebdev，它应该隐藏所有p'，h3和imgs与类“classWeb”。我写了这段代码来做，但它不起作用：

HTML：

<h3 class="classWeb">Editierbare Inhalte</h3>
  <p class="classWeb">Test</p>
<button class="buttonImg" id="buttonWebdev"><img src="./img/buttonWebdev.png" /></button>
<script type="text/javascript">
var button = document.getElementById('buttonWebdev');
var classWeb = document.getElementsByClassName('classWeb');
button.onmouseover = function() {
  classWeb.className = 'webdev';

}

CSS：

.classWeb.webdev {
  display: none;
}

Answer 1

首先，由于页面上可以有多个具有给定类的元素，getElementsByClassName将返回元素的列表而不是单个元素。您需要使用for…of循环对该列表的每个元素执行操作，例如：

for (let element of classWeb) {
    element.className = 'webdev';
}

（for…of相对较新，因此您可能必须使用常规for循环，具体取决于您的目标浏览器。）

修好后，你会遇到另一个问题。当您像这样分配className时，您将在对象上设置整个类列表。如果类列表为'webdev'，则不再包含'classWeb'。现代浏览器支持API来添加类，而不会影响其余部分：

for (let element of classWeb) {
    element.classList.add('webdev');
}

诊断这些问题的方法是打开浏览器的开发人员工具，在控制台中查找JavaScript错误，并查看您尝试在文档树中影响的元素的状态。

Answer 2

document.getElementsByClassName('classWeb');这给了收集＆amp;添加你需要迭代它们的类＆amp;然后申请课程。
classWeb[0].className = 'webdev';会重置课程

使用classWeb[i].className += ' webdev';或classWeb[i].classList.add('webdev');

见下面的工作示例

＆＃13;

var button = document.getElementById('buttonWebdev');
var classWeb = document.getElementsByClassName('classWeb');
button.onmouseover = function() {
  for (var i = 0; i < classWeb.length; i++)
    classWeb[i].className += ' webdev';
}

＆＃13;

.classWeb.webdev {
  display: none;
}

＆＃13;

<h3 class="classWeb">Editierbare Inhalte</h3>
<p class="classWeb">Test</p>
<button class="buttonImg" id="buttonWebdev">hover over me</button>

＆＃13;

Answer 3

首先，

document.getElementsByClassName('classWeb');

将为您提供所有匹配元素的实时列表。这意味着当你重新分配这个类时：

classWeb[0].className = 'webdev';

该元素将从列表中删除，因为它不再对应于原始命令，该命令用于查找具有特定类的所有元素（使用'webdev'进行覆盖）。

更简单，更友好的api是 querySelectorAll ，它模仿jQuery选择器（使用 css选择器来查找元素，这就是为什么有＃表示 id ，。表示类名称。以下示例显示了如何使用它。

var button = document.querySelector('#buttonWebdev');
var classWeb = document.querySelectorAll('.classWeb');

button.onmouseenter = function() {
    for (var i = 0; i < classWeb.length; i++) {
      classWeb[i].className = 'webdev';
    }
}

PS。 querySelectorAll不是实时列表，因此更改类后项不会消失。

PS2。使用 onmousenter 而不是 onmouseover ，因为 onmouseenter 仅在鼠标悬停在元素上方时调用，而 onmouseover 将在每个鼠标移动元素上调用（即使已经悬停）。

祝你好运！

无法使用JavaScript更改div的类

3 个答案: