YUI3 bağlantılar aynı sınıfları

Question

Sorun sahibi olmak için taşıma Onclick olay. Bağlantılardan birine tıkladığımda, hangi bağlantının tıklandığına bağlı olarak alınacak bazı farklı eylemler vardır.

<a href="?page=1" data="test1" class="sample">One</a> 
<a href="?page=2" data="test2" class="sample">two</a> 
<a href="?page=3" data="test3" class="sample">three</a> 

işleyicisi kodu:

Y.all('.sample').on('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}); 

ben bütün "veri" özelliğinin listesini almak bağlantılardan herhangi birini tıkladığında. Sadece linke tıklanmış veriye ihtiyacımız var.

Answer 1

all size eşleşti öğelerin listesini verir. Listede yinelemek ve bireysel düğüm için bir şeyler yapmak için each'u kullanabilirsiniz. Daha fazla bilgi için Node Class API'a bakın. İşte

kodu ve an example on jsfiddle olduğunu.

Y.all('.sample').each(function(node) { 
    node.on('click', function(e) { 
     e.preventDefault(); 
     alert(node.getAttribute("data")); 
    }); 
});​ 

da yuilibrary.com Etkinlik kullanıcı kılavuzunda bu soru için bir SSS girdisi yok (http://yuilibrary.com/yui/docs/event/#nodelist-this). Olay temsilciliğini kullanmak genellikle tercih edilir. event delegation

Y.all('.sample').on('click', function(e){ 
    e.preventDefault(); 
    alert(e.target.getAttribute("data")); 
}); 

Ve daha da iyi performans için kullanabilirsiniz:: Ayrıca elemanı erişmek için yerine this arasında e.target kullanabilirsiniz

Answer 2

tıklandığını

İşte

Y.one('body').delegate('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}, '.sample'); 

Answer 3

olay heyet daha iyi bir çözümdür, Eğer heyeti kullanmak istemiyorsanız @juandopazo

katılıyorum, sen '(Y.all kullanabilirsiniz. .

Y.on('click', function(e){ 
    e.preventDefault(); 
    alert(this.getAttribute("data")); 
}, '.sample'); 

Bu bir heyet sözdizimi (dinleyicileri değil: örnek ') @ user322896 her (...) (çözelti) ya da e.target (@juandopazo gelen çözelti), ama genellikle Başka bir do directelly linklere eklenir) ve NodeList nesnesi yoktur, bu nedenle this belirli bağlantı düğümüne işaret eder. Bu şekilde de Y.all('.sample') ile karşılaştıran bir preformans avantajı var, bunu okuyun: Why would I use Y.on() or Y.delegate() instead of node.on() and node.delegate()?