5. diel - Triedy v jQuery (DOM)

V minulej lekcii online kurze jQuery, Odstraňovanie obsahu v jQuery (DOM) , sme sa zaoberali odstraňovaním obsahu. V dnešnom JavaScript tutoriále si ukážeme, ako môžeme využiť jQuery k manipulácii s triedami. Knižnica jQuery na tento účel ako zvyčajne poskytuje niekoľko užitočných metód, ktoré nám uľahčia život.

Pomocou pridávanie alebo odoberanie tried rôznym HTML elementom meníme ich štýl. Prepínať štýly pomocou priradenia iných tried je oveľa prehľadnejšie a jednoduchšie, než štýly priamo modifikovať.

Základ stránky

Začneme ako obvykle tým, že si vytvoríme HTML súbor a JS súbor.

Javascript

Do JS súboru si vložíme základnú kostru jQuery - obsluhu Document Ready udalosti:

$(function() {
    // Kód, který se spustí až po načtení stránky
});

Html

Do HTML si vložíme zoznam najčastejšie používaných jazykov pre tvorbu webov:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>PHP</li>
    <li>ASP .NET</li>
    <li>JAVA</li>
</ul>

CSS

A rovno si pridáme tiež štýly:

ul {
    list-style-type: none;
}

ul li {
    background : #0080C0;
    color      : #ededed;
    width      : 100px;
    border     : 2px solid #004080;
    margin     : 10px 20px;
    padding    : 5px 10px;
    font-family: 'Open Sans';
    font-size  : 18px;
}

.aktivni {
    background : #ed1c24;
    color      : #ededed;
    border     : 2px solid #7f0011;
}

Súbory JS a CSS si nezabudnite nalinkovať v <head> HTML dokumentu.

Dokument v prehliadači zatiaľ vyzerá takto:

Tvoja stránka

localhost

Metódy, s ktorými budeme dnes pracovať, sa nazývajú addClass(), removeClass(), hasClass() a toggleClass().

AddClass ()

Ako prvý si predstavíme metódu addClass(), ktorá nám priradí triedu alebo triedy k danému elementu alebo elementom. Ak by sme chceli priradiť viac tried, oddelíme ich medzerou.

Ukážka # 1

Pridajme prvej položke zoznamu (HTML) id="html" a pomocou jQuery ju priradené triedy .mojeTrida.

$('#html').addClass('mojeTrida');

Ako môžeme vidieť, na našom elementu s id #html sa naozaj objavila aj trieda .mojeTrida.

Tvoja stránka

localhost

Ukážka # 2

Vyskúšajme si priraďovanie triedy na praktickejším príklade, kde kliknutím na položku pridáme triedu .aktivni, ktorá nám danú položku zafarbia.

Využijeme na to udalosť .on('click'), ktorú navešiame na elementy ul li. V anonymný funkciu na $(this) zavoláme addClass() s parametrom 'aktivni'.

$('ul li').on('click', function() {
    $(this).addClass('aktivni');
});

Kód nám funguje, môžete si ho vyskúšať v živom deme nižšie.

Tvoja stránka

localhost

RemoveClass ()

Metóda removeClass() funguje presne opačne. Ak element alebo elementy obsahujú danú triedu, odoberie ju.

Opäť môžeme odoberať viac tried, ak je oddelíme medzerou.

Ukážka # 3

Teraz ku všetkým položkám zoznamu priradíme v HTML kóde triedu .aktivní a vytvoríme si opačný príklad k tomu minulému. Kliknutím na položku ju aktívne triedu teda odoberieme.

$('ul li').on('click', function() {
    $(this).removeClass('aktivni');
});

Výsledok si môžete vyskúšať:

Tvoja stránka

localhost

Skvelé, ale ako to urobíme, keď by sme chceli meniť triedu tam a späť? Teda ju odobrať, keď bude k elementu už priradená, a pridať, keď k nemu priradené nebude?

K tomu môžeme využiť metódu hasClass().

HasClass ()

Metóda hasClass() nám vráti booleanovskou hodnotu (teda true - pravda alebo false - nepravda). Syntaxou sa od svojich predchodcov nijako nelíši.

$(selektor).hasClass('mojeTrida');

Ukážka # 4

Teraz si ukážeme, ako teda po kliknutí meniť triedu tam a späť. Využívať na to budeme práve metódu hasClass().

Najskôr si nadviažeme ako minule udalosť on('click') na položky zoznamu a do jej druhého argumentu odovzdáme anonymný funkciu.

$('ul li').on('click', function() {

});

Nasledujúci kód budeme vkladať dovnútra anonymný funkcie. Pripíšeme podmienku či má element $(this) priradenú triedu .aktivni. Premenná this v obslužnej funkcii udalosti vždy obsahuje element, ktorý udalosť vyvolal.

$('ul li').on('click', function() {
    if ($(this).hasClass('aktivni')) {
        $(this).removeClass('aktivni');
    } else {
        $(this).addClass('aktivni');
    }
});

Živé demo:

Tvoja stránka

localhost

Po pár kliknutiach vidíme, že všetko funguje tak, ako má. Náš kód je však pomerne dlhý a ak nechceme okrem pridania a odoberanie triedy nič vykonávať nič ďalšie, možno danú funkcionalitu vykonať oveľa elegantnejšie. K tomu využijeme metódu toggleClass().

ToggleClass ()

Metóda toggleClass() prepne triedu danému elementu alebo elementom. To znamená, že ak element nemá triedu priradenú, priradí ju. V opačnom prípade triedu odoberie.

$(selektor).toggleClass('mojeTrida');

Môžeme definovať aj podmienku, za ktoré sa má trieda priradiť. napríklad:

$(selektor).toggleClass('mojeTrida', cislo % 2 === 0);

Kód vyššie priradí triedu .mojeTrida elementom vybraným selektorom iba v prípade, keď je premenná cislo párna (zvyšok po delení 2 je 0).

Ukážka # 5

Ukážme si teda náš minulý príklad PRIO prepnutie tried, tentoraz pomocou toggleClass(). Ako minule si pripravíme udalosť:

$('ul li').on('click', function() {

});

A teraz miesto ifování použijeme toggleClass().

$('ul li').on('click', function() {
    $(this).toggleClass('aktivni');
});

Všetko nám ide pekne preklikávať a to s veľmi krátkym kódom, na čo je jQuery senzačný.

Tvoja stránka

localhost

Ukážka # 6

To ale nie je všetko, čo sa dá s týmito metódami urobiť. Namiesto názvu triedy môžeme totiž odovzdať tiež anonymné funkciu, ktorá v sebe bude mať rôzne podmienky, na základe ktorých vráti rôzne názvy tried.

Ukážme si napr. Funkciu, ktorá nám pridá na všetko kde nie je text PHP triedu .aktivni. Pre ukážku si tiež dosadíme do položiek, ktoré neobsahujú 'PHP' triedu .chciBytPHP.

Na položkách zoznamu zavoláme metódu addClass() a namiesto názvu triedy odovzdáme teda anonymné funkciu:

$('ul li').addClass(function() {

});

Dovnútra funkcie napíšeme túto jednoduchú podmienku:

$('ul li').addClass(function() {
    if ($(this).text() == 'PHP') {
        return 'aktivni';
    }
    return 'chciBytPHP';
});

Podmienka sa dá samozrejme ešte zminimalizovat a to takto:

$('ul li').addClass(function() {
    return ($(this).text() == 'PHP') ? 'aktivni' : 'chciBytPHP';
});

Po vyskúšaní sa zvýrazní len položka PHP au ostatných vidíme priradenú triedu .chciBytPHP.

Tvoja stránka

localhost

Niekto sa možno pýta, ako je možné, že sa nám zafarbia len 'PHP', bez toho použijeme metódu ako each() alebo niečo podobné. Knižnica jQuery totiž nerozlišuje či je vo výbere jeden alebo viacero elementov, všetky metódy vždy zavolá na všetky elementy vo výbere.

V budúcej lekcii, Selektory v jQuery, časť prvá , si urobíme prehľad selektorov, ktoré môžeme v jQuery použiť.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 367x (1.17 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

Článok pre vás napísal Honza Bittner

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Aktivity