Zde je úryvek mého kódu:
<div class="myclass" id="demo" style="display:none;">Hello.</div> <a href="#" onclick="$('.myclass').fade({ duration: 0.3, from: 1, to: 0 }); $('demo').appear({ delay: 0.35 }); return false;">Click ME!</a><br />
Můj vývojový plugin Firebug říká:
$(.myclass”) je null
Zkoušel jsem různá jiná jména, například:$('div.myclass')
a $('myclass')
, zbytečně. Jak zajistím, aby tento efekt fungoval na třídě? Díky!
Odpověď
$$('.myclass')[0].fade()
$$ v prototypu (a mootools) přijímá jakýkoli druh css selektoru, jako je $$('div#joe')
nebo $$('a[rel=awesome]')
a vrátí pole.
$ vrátí pouze prvek s odpovídajícím ID, jako je $(‘joe’);
Takže vzhledem k tomuto html:
<div id="joe" class="awesome"></div> <div id="sally" class="awesome"></div>
$$('.awesome')
vrátí pole obsahující oba DIV$('joe')
a$$('#joe')
jsou ve skutečnosti stejné (ačkoli druhé je pole).
UPRAVIT
Nejprve odeberte události onclick a přidejte nějaké informace do atributu rel, jako je to:
<a rel="demo" href="#">Div 1</a><br /> <a rel="demo2" href="#">Div 2</a><br /> <a rel="demo3" href="#">Div 3</a>
Pak to vložte do head
vašeho dokumentu ve značce skriptu.
document.observe("dom:loaded", function() { // this makes sure the document is loaded and ready to be manipulated // store your links and demo DIVs in arrays var links = $$('div.rightcol a'); var demos = $$('.myclass'); // enumerate over the links links.each(function(link){ // observe the click event of the current link in the loop link.observe('click',function(event){ event.stop(); // loop the demo DIVs and fade each one demos.each(function(demo){ demo.fade({ duration: 0.3, from: 1, to: 0 }); }); // figure out which demo to fade in from the links rel attribute var target = link.readAttribute('rel'); // get the demo target and fade it in $(target).appear({ delay: 0.35 }); }); }); });
Doufám, že se skript dá snadno sledovat.