Anniversary - BF C/C++ week
80 % bodů zdarma na online výuku díky naší Narozeninové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se C/C++

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:

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 307x (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?
16 hlasů
Student FIT ČVUT. In love with Dart & Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Předchozí článek
Odstraňování obsahu v jQuery (DOM)
Všechny články v sekci
jQuery
Miniatura
Následující článek
Selektory v jQuery, část první
Aktivity (3)

 

 

Komentáře
Zobrazit starší komentáře (4)

Avatar
Honza Bittner
Šupák
Avatar
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
Student FIT ČVUT. In love with Dart &...
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
Student FIT ČVUT. In love with Dart &...
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
9.3.2014 23:16
Student FIT ČVUT. In love with Dart &...
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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Miroslav Sivoň:4.2.2018 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.2.2018 19:46
Avatar
Patrik Pastor:3.4.2019 21:00

Cau, mam dotaz. $('#html').ad­dClass('mojeTri­da'); ... V jakem dokumentu uvidim ono pridani tridy ".mojeTrida"? Mam na mysli kdyz se ve visual codu podivam na .html soubor, neuvidim tam tuto classu, tak kde si overim (tim, ze ji fyzicky uvidim), ze se opravdu na element pridala? Diky.

 
Odpovědět
3.4.2019 21:00
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Patrik Pastor
Honza Bittner:3.4.2019 21:06
:D

Třída se ti samozřejmě nepřidá do zdrovojého kódu, ale až do výsledné sestavené stránky v prohlížeči. Ve většině webových prohlížečů si můžeš zobrazit DOM pomocí klávesové zkratky F12 (záložka něco jako "elementy").

Odpovědět
3.4.2019 21:06
Student FIT ČVUT. In love with Dart &...
Avatar
Jan Doležal
Člen
Avatar
Jan Doležal:6. února 12:58

Ahoj, chtěl jsem napsat funkci, která by změnila třídu elementu na základě toho jestli obsahuje text 'PHP' a zároveň toho jestli má třídu 'aktivni' nebo ne. Nefunguje mi to :) Byl bych strašně rád za jakoukoliv pomoc :)

 
Odpovědět
6. února 12:58
Avatar
Petr Kašný
Člen
Avatar
Odpovídá na Jan Doležal
Petr Kašný:20. února 9:15

Ahoj,
nevím, jestli jsi to chtěl takto, ale mě to funguje:

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

                if ($(this).text() == 'PHP') {
              $(this).toggleClass('aktivni'); }

});
 
Odpovědět
20. února 9:15
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 14. Zobrazit vše