Question

我在h1或h2中都有一个带有不同标题的HTML文档。 h2标题具有“ subHeadline”类。当我单击它们时，我想使所有的h2标签变成白色。

在下面的JavaScript代码中，您可以看到我尝试使用'subHeadline'类定位HTML文档中的所有元素。但是，当我单击它时，它只会使第一个h2标签变成白色。如果单击，如何使所有h2标题变成白色？这是我的代码：

<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The third h2</h2>
<p> Random paragraph text. </p>
<script>

let headline = document.querySelector('h1');
headline.addEventListener('click', changeHeader);

function changeHeader() {
  headline.style.color = 'white';
}

let subHead = document.querySelector('.subHeadline');
subHead.addEventListener('click', changeSubheader);

function changeSubheader() {
  subHead.style.color = 'white';
}

Answer 1

您必须遍历所有标头并附加事件处理程序。

为此，您可以使用querySelectorAll和forEach。请参见querySelectorAll和forEach的文档。

如下面的@Andreas所建议，您可以对标题和subHeadlines使用单个querySelectorAll：

document.querySelectorAll('h1, .subHeadline');

您需要对函数进行一些小的更改，以将click事件作为参数。此事件作为target属性，将成为您单击的标题。

function changeColor(event) {
  event.target.style.color = 'white';
}

document.querySelectorAll('h1, .subHeadline')
  .forEach(el => el.addEventListener('click', changeColor));

<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The third h2</h2>
<p> Random paragraph text. </p>

Answer 2

document.querySelector仅在文档中找到 first 匹配元素-这就是为什么事件侦听器仅在第一个元素上起作用的原因。要解决此问题，请改用querySelectorAll，并遍历结果集合以分别添加侦听器。

请注意，我必须更改您的事件侦听器，以便它们仅影响单击的元素。他们将事件对象本身作为参数（在这里我将其称为e，这是一个通用约定），然后e.target是实际单击的元素。

let headlines = document.querySelectorAll('h1');
headlines.forEach(headline => headline.addEventListener('click', changeHeader));

function changeHeader(e) {
  e.target.style.color = 'white';
}

let subHeaders = document.querySelectorAll('.subHeadline');
subHeaders.forEach(subhead => subhead.addEventListener('click', changeSubheader));

function changeSubheader(e) {
  e.target.style.color = 'white';
}

<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"> The third h2</h2>
<p> Random paragraph text. </p>

Answer 3

在代码上使用onclick事件，并将元素本身传递给功能，然后将其变为白色

function a(e) {
  e.style.color = 'white';
}

<h1> The first h1</h1>
<p> Random paragraph text. </p>

<h1> The second h1</h1>
<p> Random paragraph text. </p>

<h1> The third h1</h1>
<p> Random paragraph text. </p>

<h2 class="subHeadline" onclick="a(this)"> The first h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline"  onclick="a(this)"> The second h2</h2>
<p> Random paragraph text. </p>

<h2 class="subHeadline" onclick="a(this)"> The third h2</h2>
<p> Random paragraph text. </p>

如何使用JavaScript定位和更改HTML文档中的所有h2标签

3 个答案: