Question

每当我点击一个也是h1的容器时。但是当我点击容器时我想做。我想把它的h1颜色变成蓝色。我卡在了使h1变蓝的部分。

var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');

// Put event listener on each container
for(var i = 0; i < container.length; i++) {
  container[i].addEventListener('click', function() {
      // This isn't working
      h1[i].style.color = 'blue';
  })
}

<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>

Answer 1

当您使用h1[i].style...时，您指的是错误的元素请改用this，它会正常工作。请参阅以下代码：

＆＃13;

var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');

// Put event listener on each container
for(var i = 0; i < container.length; i++) {
  container[i].addEventListener('click', function() {
      // Get the 1st H1 inside current container
     this.getElementsByTagName('h1')[0].style.color = 'blue';
  })
}

＆＃13;

<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>

＆＃13;

Answer 2

var container = document.getElementsByClassName('container');
var h1 = document.getElementsByTagName('h1');

// Put event listener on each container
for(var i = 0; i < container.length; i++) {
  container[i].addEventListener('click', function() {
      this.firstElementChild.style.color="blue"
  })
}

container[i].addEventListener('click', ....) this内部是容器的HTML元素。因此，调用this.firstElementChild将获取该容器的H1并将其颜色更改为蓝色。如果您在H1之前添加任何内容，只需拨打children上的this功能并抓住h1元素。

Answer 3

直接发布的答案都没有解决问题。他们依赖于更改.container元素的整个颜色，或<h1>始终是.container的第一个孩子。

您遇到的问题是您的i变量超出了范围，并且无法在您定义的事件处理程序中使用。我们可以通过将处理函数包装在闭包中来解决这个问题，如下所示：

var container = document.getElementsByClassName('container'),
    h1        = document.getElementsByTagName('h1');

for(var i = 0; i < container.length; i++)
{
  container[i].onclick = (function(i) {return function() {
    h1[i].style.color = 'blue';
  };})(i);
};

<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>
<div class="container">
  <h1>HELLO</H1>
</div>

请注意，上述内容只会更改<h1>的颜色。当然，这假设所有<h1>元素的数量和索引总是由.container元素匹配（但我认为它们来自您的问题）。

单击它的容器时如何使h1颜色发生变化？

3 个答案: