document.getElementsByClassName

Question

içinde bir sınıfın belirli bir seçici için bir işlevi çalıştırmak için Belirli bir sınıfa tıkladığınızda javascript içinde bir fade out işlevi yapmak için çalışıyorum, ama almaya çalışırken zor bir zaman geçiriyorum solması için belirli bir sınıf. bu anahtar sözcüğünü kullanmaya çalışıyorum ama sanırım yanlış kullanıyorum çünkü tanımlanmadığını söylemeye devam ediyor.

<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 hem addEventListener burada sorunları ve setInterval() sen işleyicisi yürütmesini yerine doğrudan fonksiyon referneces geçiyoruz vardır.

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>

_{Not: e}

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

den deneyin Bu çözüm nedir yüzden

Answer 2

üzerinde birden fazla tıklama ve desteklemek için başka değişiklikler gerekecektir

Bkz. Here. This, her zaman işlevinizin nasıl çağrıldığına bağlıdır. Senin durumunda . Doğru çağrılırsa, e'un değerine sahip olmalısınız. Buraya tıklayın Here