Lekce 5 - Třídy v jQuery (DOM)

V minulé lekci online kurzu jQuery, Odstraňování obsahu v jQuery (DOM), jsme se zabývali odstraňováním obsahu.

V dnešním JavaScript tutoriálu si ukážeme, jak můžeme využít jQuery k manipulaci s třídami. Knihovna jQuery k tomuto účelu jako obvykle poskytuje několik užitečných metod, které nám usnadní život.

Pomocí přidávání nebo odebírání tříd různým HTML elementům měníme jejich styl. Přepínat styly pomocí přiřazení jiných tříd je mnohem přehlednější a jednodušší, než styly přímo modifikovat.

Základ stránky

Začneme jako obvykle tím, že si vytvoříme HTML soubor a JS soubor.

JavaScript

Do JS souboru si vložíme základní kostru jQuery - obsluhu Document Ready události:

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

HTML

Do HTML si vložíme seznam nejčastěji používaných jazyků pro tvorbu webů:

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

CSS

A rovnou si přidáme také styly:

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;
}

Soubory JS a CSS si nezapomeňte nalinkovat v <head> HTML dokumentu.

Dokument v prohlížeči zatím vypadá takto:

Tvoje stránka

localhost

Metody, se kterými budeme dnes pracovat, se nazývají addClass(), removeClass(), hasClass() a toggleClass().

addClass()

Jako první si představíme metodu addClass(), která nám přiřadí třídu nebo třídy k danému elementu nebo elementům. Pokud bychom chtěli přiřadit více tříd, oddělíme je mezerou.

Ukázka #1

Přidejme první položce seznamu (HTML) id="html" a pomocí jQuery ji přiřaďme třídu .mojeTrida.

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

Jak můžeme vidět, na našem elementu s id #html se opravdu objevila i třída .mojeTrida.

Tvoje stránka

localhost

Ukázka #2

Vyzkoušejme si přiřazování třídy na praktičtějším příkladu, kde kliknutím na položku přidáme třídu .aktivni, která nám danou položku obarví.

Využijeme k tomu událost .on('click'), kterou navěsíme na elementy ul li. V anonymní funkci na $(this) zavoláme addClass() s parametrem 'aktivni'.

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

Kód nám funguje, můžete si jej vyzkoušet v živém demu níže.

Tvoje stránka

localhost

removeClass()

Metoda removeClass() funguje přesně opačně. Pokud element nebo elementy obsahují danou třídu, odebere ji.

Opět můžeme odebírat více tříd, pokud je oddělíme mezerou.

Ukázka #3

Nyní ke všem položkám seznamu přiřadíme v HTML kódu třídu .aktivní a vytvoříme si opačný příklad k tomu minulému. Kliknutím na položku ji aktivní třídu tedy odebereme.

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

Výsledek si můžete vyzkoušet:

Tvoje stránka

localhost

Skvělé, ale jak to uděláme, když bychom chtěli měnit třídu tam a zpět? Tedy ji odebrat, když bude k elementu již přiřazená, a přidat, když k němu přiřazená nebude?

K tomu můžeme využít metodu hasClass().

hasClass()

Metoda hasClass() nám vrátí booleanovskou hodnotu (tedy true - pravda nebo false - nepravda). Syntaxí se od svých předchůdců nijak neliší.

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

Ukázka #4

Nyní si ukážeme, jak tedy po kliknutí měnit třídu tam a zpět. Využívat na to budeme právě metodu hasClass().

Nejdříve si navážeme jako minule událost on('click') na položky seznamu a do jejího druhého argumentu předáme anonymní funkci.

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

});

Následující kód budeme vkládat dovnitř anonymní funkce. Připíšeme podmínku zda má element $(this) přiřazenou třídu .aktivni. Proměnná this v obslužné funkci události vždy obsahuje element, který událost vyvolal.

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

Živé demo:

Tvoje stránka

localhost

Po pár kliknutích vidíme, že vše funguje tak, jak má. Náš kód je ovšem poměrně dlouhý a pokud nechceme kromě přidání a odebírání třídy nic vykonávat nic dalšího, lze danou funkcionalitu provést mnohem elegantněji. K tomu využijeme metodu toggleClass().

toggleClass()

Metoda toggleClass() přepne třídu danému elementu nebo elementům. To znamená, že pokud element nemá třídu přiřazenou, přiřadí ji. V opačném případě třídu odebere.

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

Můžeme definovat i podmínku, za které se má třída přiřadit. Například:

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

Kód výše přiřadí třídu .mojeTrida elementům vybraným selektorem pouze v případě, když je proměnná cislo sudá (zbytek po dělení 2 je 0).

Ukázka #5

Ukažme si tedy náš minulý příklad prio přepnutí tříd, tentokrát pomocí toggleClass(). Jako minule si připravíme událost:

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

});

A nyní místo ifování použijeme toggleClass().

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

Vše nám jde hezky překlikávat a to s velmi krátkým kódem, na což je jQuery senzační.

Tvoje stránka

localhost

Ukázka #6

To ale není vše, co se dá s těmito metodami udělat. Místo názvu třídy můžeme totiž předat také anonymní funkci, která v sobě bude mít různé podmínky, na jejichž základě vrátí různé názvy tříd.

Ukažme si např. funkci, která nám přidá na vše kde není text PHP třídu .aktivni. Pro ukázku si také dosadíme do položek, které neobsahují 'PHP' třídu .chciBytPHP.

Na položkách seznamu zavoláme metodu addClass() a místo názvu třídy předáme tedy anonymní funkci:

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

});

Dovnitř funkce napíšeme tuto jednoduchou podmínku:

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

Podmínka se dá samozřejmě ještě zminimalizovat a to takto:

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

Po vyzkoušení se zvýrazní jen položka PHP a u ostatních vidíme přiřazenou třídu .chciBytPHP.

Tvoje stránka

localhost

Někdo se možná ptá, jak je možné, že se nám obarví jen 'PHP', aniž použijeme metodu jako each() nebo něco podobného. Knihovna jQuery totiž nerozlišuje zda je ve výběru jeden nebo více elementů, všechny metody vždy zavolá na všechny elementy ve výběru.

V příští lekci, Selektory v jQuery, část první, si uděláme přehled selektorů, které můžeme v jQuery použít.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 373x (1.17 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

Článek pro vás napsal Honza Bittner

Uživatelské hodnocení:

112 hlasů

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

Aktivity

Nejčastěji vyhledáváné

Lekce 5 - Třídy v jQuery (DOM)

Základ stránky

JavaScript

HTML

CSS

addClass()

Ukázka #1

Ukázka #2

removeClass()

Ukázka #3

hasClass()

Ukázka #4

toggleClass()

Ukázka #5

Ukázka #6

Stáhnout