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

这里有两个问题，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>

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

Answer 2

来自

的e是什么

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

尝试

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

请参阅Here。This含义总是取决于您的函数的调用方式。在你的情况下。如果调用此权限，则应该具有e的值。点击Here

如何在document.getElementsByClassName中运行函数到类的特定选择器

2 个答案: