javascript - 如何对 document.getElementsByClassName 中的类的特定选择器运行函数

Question

当您单击特定类时，我试图在 javascript 中实现淡出功能，但我很难尝试让特定类淡出。我试图使用 this 关键字，但我想我用错了，因为它一直说它未定义。

<div class="opaque">
<h3>Fade Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
<h3>Fade Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
<h3>Fade Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

 var o =1;
 var r = 0.1;
 var a;
 var counter;
 var e;


 function myFunction(e)
{
 e = this.style.opacity = o;
console.log(this.style.opacity);
counter = setInterval(fadeO(e),5000);



}

function execute()
{  


  a = document.getElementsByClassName('opaque');
  for( var i = 0; i< a.length; i++)
  {
    a[i].addEventListener('click',myFunction(e));
  }

}//end execute

function fadeO(e)
{
 this.a = document.getElementsByClassName('opaque');


if(e.style.opacity <=0)
{
 clearInterval(counter);
}
else{
 e.style.opacity = o ;
 console.log(e.style.opacity);
  o -=0.1;

}
}

window.onload = function()
{

execute();

} 

Answer 1

这里有 2 个问题，在 addEventListener 和 setInterval() 中，您直接调用处理程序而不是传递函数引用。

var o = 1;
var r = 0.1;
var a;
var counter;
var e;


function myFunction(e) {
  this.style.opacity = 1;
  console.log(this.style.opacity);
  counter = setInterval(fadeO.bind(this), 100);//again need to pass a function reference to `interval()` don't invoke the function by adding (), in this solution instead of passing the element reference as an argument we are passing it as the `this` reference by using Function.bind()
}

function execute() {
  a = document.getElementsByClassName('opaque');
  for (var i = 0; i < a.length; i++) {
    a[i].addEventListener('click', myFunction);//pass the handler reference, don't invoke it by adding `()`
  }

} //end execute

function fadeO() {
  if (this.style.opacity <= 0) {
    clearInterval(counter);
  } else {
    this.style.opacity = o;
    console.log(this.style.opacity);
    o -= 0.1;
  }
}

window.onload = function() {
  execute();
}

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

<div class="opaque">
  <h3>Fade Heading</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
</div>

_{注意:此解决方案将需要进一步更改以支持多次点击等}