Eljött az első igazi gyakorlásunk ideje. Az első cikkben már emlegetett kis programot fogjuk megírni. A cél, hogy használat közben is megtekintsünk pár kijelölési módot, alkalmazzunk a szelektált elemekre függvényhívásokat (jelen esetben a CSS-módosítást), és ezek végrehajtását mind valamilyen eseményhez kössük.

<h3 id="cim1">Az első lista</h3>
<ul id="lista1" class="lista">
    <li class="li1">Az első lista első eleme</li>
    <li class="li2">Az első lista második eleme</li>
    <li class="li3">Az első lista harmadik eleme</li>
    <li class="li1">Az első lista negyedik eleme</li>
    <li class="li2">Az első lista ötödik eleme</li>
</ul>
<h3 id="cim2">A második lista</h3>
<ul id="lista2" class="lista">
    <li class="li1">A második lista első eleme</li>
    <li class="li2">A második lista második eleme</li>
    <li class="li3">A második lista harmadik eleme</li>
    <li class="li1">A második lista negyedik eleme</li>
    <li class="li2">A második lista ötödik eleme</li>
</ul>
<input type="button" id="gomb" value="Színezés"/>

Szerepeljen ez a kódrészlet a HTML-ükben. Gyorsan fussuk át, mit is alkot ez a kialakítás: áll 2 darab H3-as címsorból, amik különböző "cim1" és "cim2" azonosítóval rendelkeznek. Mindkettő alatt szerepel egy "lista" osztályba tartozó UL felsorolás, amiknek az id-jük viszont szintén eltérő. Ezeken belül pedig LI elemek sorakoznak hármasával különböző osztályokba sorolva ("li1, "li2" és "li3"). Alul pedig van egy gombunk, aminek megnyomására össze-vissza fogjuk színezni ezeket.

Jöhet akkor a szkript írása

Nem lenne egy hátrány, ha a színezések nem egyszerre, hanem minden gombnyomásra külön történnének, hogy jobban átláthassuk egyenként, mi is történik. Ennek érdekében kellene nekünk egy változó, amiben eltárolunk egy értéket, amit minden gombnyomáskor növelünk és aktuális értéke alapján döntjük el, hogy melyik függvény végrehajtása a soron következő.

var x=1;

Ez a szkriptünk legelső sora. Felvettünk egy "x" változót, aminek kezdetben az értéke 1 (tehát a legelső színezési függvény az egyes szám esetében hajtódik végre, a második meg majd - növelés után - a 2 esetében, és így tovább). Akkor most közöljük a jQuery-vel hogy klikkelési eseményt kérünk a gombunknak.

$('#gomb').click(function(){
    //ide jön majd a többi kód
});

Lássuk, mi jön az egéreseményünk függvényének a belsejébe... Itt ugye megnyomtuk a gombot és el kell döntenünk, hogy melyik feladat végrehajtása következik (ezért is vezettük be az "x" változót). Ide én egy "switch" szerkezet alkalmazását tartom célszerűnek. Egy rövidke kis emlékeztető: a SWITCH megvizsgál egy megadott értéket (ami esetünkben az "x" változó értéke lesz) és attól függően a megadott esetekhez leírt programrészek hajtódnak végre. A különböző eseteket a CASE kulcsszavakkal jelöljük, amelyeket követő kódrészlet lezárására a BREAK parancs szolgál (ez jelzi, hogy eddig fut a végrehajtás). Tehát valami ilyesmi következik:

switch(x){
    case 1:
        //ezt csinálja, ha X egy
        break;
    case 2:
        //ezt csinálja, ha X kettő
        break;
    //és így tovább...
}

Akkor nézzük végig a lépéseket egyenként, amiket futtatni fogunk. A legelső kódocska így fog kinézni:

$('h3').css('background-color','black');
$('h3').css('color','white');

Tehát a "h3" típusú elemek háttérszínét feketévé varázsoljuk, a betűszínük pedig fehér lesz. Ez a dokumentumon belül minden "h3"-ra vonatkozik.

$('#cim2').css('background-color','gray');

A második lépésben viszont már azt kérjük, a "cim2" azonosítóval rendelkező elem (ez a második "h3") háttérszíne legyen szürke. Ez rajta kívül mást nem fog érinteni.

$('#lista1 li').css('background-color','yellow');

Itt azt akarjuk, hogy a "lista1" azonosítójú objektumon belüli "li" elemek háttere változtassuk sárgára. Ekkor a program csak az első listát veszi figyelembe, viszont ez annak az összes "li" tagjára érvényesülni fog.

$('.li3').css('background-color','lime');

Most úgy variálunk még a dolgokon, hogy a "li3" osztályba tartozóakat rikító zöldre festjük. Ilyenből mindkét listában van egy, így az első "ul" egyik sárga hátterű "li"-je is átvált, valamint a második "ul" egyik "li" eleme is erre vált át.

$('#lista2 .li1').css('background-color','aqua');

Most a "li1" osztályba tartozó tagok háttérszínét nyomjuk át szép világoskék árnyalatba, de csak a "lista2" id-jű elemen belülre vonatkoztatva. Az első listában is szerepelnek ilyen osztállyal címkézett tagok, de emiatt a megkötés miatt ez rájuk nem lesz hatással.

$('#lista1 li:nth-child(2)').css('color','red');

Hogy legyen ilyen is... Az első lista második "li" típusú tagjának (gyermekének) a betűszíne legyen vörös. Ez gondlom egyértelmű, hogy mit fog művelni.

$('body').css('background-color','silver');

Ez az utolsó, nyugi :) Még megkoronázzuk az egészet egy világosszürkére festéssel a "body" főelemre vonatkozóan. Ekkor már szép színes lesz a dokumentumunk.

Akkor most ezeket bele kell ágyaznunk a SWITCH szerkezetünkbe, ami tehát 7 esetből fog felépülni. Még ezek után ne felejtsük el a parancsot, ami az "x" értékét minden gombnyomás esetén növelni fogja 1-gyel. Hogy minden totál tiszta legyen, itt látható a teljes szkript:

var x=0;
$('#gomb').click(function(){
    switch(x){
        case 1:
            $('h3').css('background-color','black');
            $('h3').css('color','white');
            break;
        case 2:
            $('#cim2').css('background-color','gray');
            break;
        case 3:
            $('#lista1 li').css('background-color','yellow');
            break;
        case 4:
            $('.li3').css('background-color','lime');
            break;
        case 5:
            $('#lista2 .li1').css('background-color','aqua');
            break;
        case 6:
            $('#lista1 li:nth-child(2)').css('color','red');
            break;
        case 7:
            $('body').css('background-color','silver');
            break;
    }
    x++;
});

Azért itt már egész jók vagyunk, most már írtunk egy picit összetettebb kódot is :) Próbáld meg te is működésre bírni. Ha esetleg mégis valami nem akarna stimmel, itt megtalálod az én kódomat: KLIKK