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

JavaScript jQuery Třídy v jQuery (DOM)

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

Your page
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.

Your page
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.

Your page
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:

Your page
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:

Your page
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í.

Your page
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.

Your page
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.


 

Stáhnout

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

 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
14 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Selektory v jQuery, část první
Aktivity (2)

 

 

Komentáře

Avatar
Taskkill
Redaktor
Avatar
Taskkill:8.3.2014 19:10

Zdravím, v první větě v sekci .toggleClass je chyba..je tam .tohhleClass ... jo a ještě tohle: $(selector).tog­gleClass('moje­Trida', cislo % 2 === 0); ...myslím že ta tři rovnítka mají být o jedno chudší ... díky za lekci a doufám, že budeš pokračovat je to dost zajímavé.

 
Odpovědět 8.3.2014 19:10
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Taskkill
Honza Bittner:8.3.2014 20:16

Tři rovnítka tam jsou správně, viz třeba http://stackoverflow.com/…n-javascript
:)

Za tu chybu děkuji.

Odpovědět 8.3.2014 20:16
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:8.3.2014 22:04

No..musím se omluvit...tohle jsem nevěděl a dokonce jsem si to ani neověřil...značná chyba ... díky za informaci.

 
Odpovědět  +1 8.3.2014 22:04
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:8.3.2014 22:52

koukal jsem na to a nechápu tedy proč používáš tři ... proč bys tu nepoužil dvě? vždyť obě dvě porovnávané metody jsou stejného datového typu ... sám jsem to vyzkoušel a porovnává to naprosto v pořádku..takže jsem tím mírně zmaten...

 
Odpovědět 8.3.2014 22:52
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Taskkill
Honza Bittner:9.3.2014 0:14

Pokud by ti někdy vyhodilo

cislo % 2

false, tak by se podmínka provedla, my ale chceme pouze číslo 0, tedy použijeme ===.

Odpovědět 9.3.2014 0:14
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:9.3.2014 0:18

Ah..jistě už rozumím ... konverze je v tomhle směru proti nám...nenapadlo mne předpokládat, že by se tohle mohlo stát..pokud se nepletu musel bych zkonit něco s proměnnou cislo ... jinak clear

Editováno 9.3.2014 0:20
 
Odpovědět 9.3.2014 0:18
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Taskkill
Honza Bittner:9.3.2014 0:35

Pokud by se tam prostě dostalo nějakým způsobem něco, co znamená 0, tak by se nám to vykonalo...

Můžeš se kouknout na tento přehled, první je == a kousek pod tím je ===, tak můžeš porovnat ;)

Odpovědět 9.3.2014 0:35
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Taskkill
Honza Bittner:9.3.2014 23:16

Zapomněl jsem vložit odkaz na ten přehled...
-> http://zero.milosz.ca/

Odpovědět  +1 9.3.2014 23:16
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:10.3.2014 20:37

Dobrá tabulka...díky bude se hodit...

 
Odpovědět 10.3.2014 20:37
Avatar
Miroslav Sivoň:4. února 19:46

diky za tutorial. Pridavam skript s preklikavanim pro inspiraci, ktery ma obarvenou pouze jednu polozku. Vychazel jsem s teto a predchozi lekce.

var sklad = [];
$('ul li').on('click', function(){
   if ( $(this).hasClass('aktivni') )
   {
      $(this).removeClass('aktivni');
      sklad.pop();
   }
   else
   {
      //sklad.removeClass('aktivni');
      $(sklad[0]).removeClass('aktivni');
      sklad.pop();
      $(this).addClass('aktivni');
      sklad.push($(this));
   }

});

 
Odpovědět 4. února 19:46
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.