80 % bodů zdarma na online výuku díky naší Letní akci!
Pouze tento týden sleva až 80 % na e-learning týkající se PHP

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:

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

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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.

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

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

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

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

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


 

Stiahnuť

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

 

Predchádzajúci článok
Odstraňovanie obsahu v jQuery (DOM)
Všetky články v sekcii
Základy jQuery
Článok pre vás napísal Honza Bittner
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity (1)

 

 

Komentáre

Avatar
Taskkill
Redaktor
Avatar
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

Editované 9.3.2014 0:20
 
Odpovedať
9.3.2014 0:18
Avatar
Honza Bittner
Šupák
Avatar
Odpovedá 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 ;)

Odpovedať
9.3.2014 0:35
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Honza Bittner
Šupák
Avatar
Odpovedá na Taskkill
Honza Bittner:9.3.2014 23:16

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

Odpovedať
9.3.2014 23:16
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Taskkill
Redaktor
Avatar
Odpovedá na Honza Bittner
Taskkill:10.3.2014 20:37

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

 
Odpovedať
10.3.2014 20:37
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));
   }

});

 
Odpovedať
4.2.2018 19:46
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
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.

 
Odpovedať
3.4.2019 21:00
Avatar
Honza Bittner
Šupák
Avatar
Odpovedá 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").

Odpovedať
3.4.2019 21:06
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Jan Doležal
Člen
Avatar
Jan Doležal:6. februára 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 :)

 
Odpovedať
6. februára 12:58
Avatar
Petr Kašný
Člen
Avatar
Odpovedá na Jan Doležal
Petr Kašný:20. februára 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'); }

});
 
Odpovedať
20. februára 9:15
Avatar
frenky.pv
Člen
Avatar
frenky.pv:29. júna 6:41

V Ukázka #1 je chyba používáte jako selektor id="html", ale v zobrazeném html nejsou atributy id definovány.

 
Odpovedať
29. júna 6:41
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!