Jak vyberete třídu CSS v Scriptaculous JavaScript?

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>
  1. $$('.awesome') vrátí pole obsahující oba DIV
  2. $('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.