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:
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
.
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.
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ť:
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:
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ý.
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
.
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é 373x (1.17 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript