6. díl - Třídy v jQuery (DOM)

JavaScript jQuery Třídy v jQuery (DOM)

V tomto článku si ukážeme, jak můžeme využít jQuery k manipulaci s třídami. jQuery má na to totiž několik funkcí, které nám hodně usnadní život.

Přidávání a odebírání tříd se používá ke stylování stránky, jelikož to je přehlednější, rychlejší a lépe upravitelné.

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

Do JS si vložíme základní kostru.

$(function(){
  ... kód ...
});

Do HTML si vložíme tento kód, použijeme třeba seznam nejčastěji používaných jazyků pro tvorbu webu.

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

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

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

Funkce s kterými budeme pracovat se jmenují .addClass(), .removeClass(), .hasClass() a .toggleClass().

.addClass()

Jako první si představíme funkci .addClass(), která nám přidá na vybrané elementy třídu nebo třídy, které chceme.

Pokud chceme přiřadit více tříd, oddělíme je mezerou.

Ukázka #1

Přidejme položce s HTML id #html a přidejme ji třídu .mojeTrida.

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

Jak můžeme vidět, na naše #html se přidala i třída .mojeTrida.

Přidání CSS třídy v jQuery

Ukázka #2

Ukažme si to na praktickém příkladu, kde klikem na položku přidáme třídu .aktivni, která nám obarví položku.

Využijeme k tomu událost .on('click'), kam jako druhý atribut přidáme anonymní funkci, kterou napojíme na element 'ul li'. Do anonymní funkce si na $(this) napojíme funkci .addClass() s atributem 'aktivni'.

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

Kód nám funguje a po kliku na první dvě položky vidíme něco takovéto.

Změna položky po kliknutí v jQuery

.removeClass()

Funkce .removeClass() dělá přesný opak, zkontroluje náš selektor a pokud element obsahuje třídu, odstraní ji.

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

Ukázka #3

Nyní si všem položkám dopíšeme v HTML třídu .aktivní a uděláme si inverzní děj k minulému příkladu.

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

Po kliku na JS a PHP uvidíme tento stav.

Odkliknutí položky v jQuery

Super, ale jak to uděláme, když bychom chtěli měnit třídu tam a zpět? Tedy ji odstranit, když ji bude element obsahovat a přidat, když ji obsahovat nebude?

K tomu nám slouží funkce .hasClass().

.hasClass()

Funkce .hasClass() nám vrátí booleanovskou hodnotu (tedy true - pravda - nebo false - nepravda).

Syntaxí se nijak od předchůdců neliší.

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

Ukázka #4

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

Zaprvé si napíšeme jako minule událost .on('click') a do jejího druhého atributu, což je anonymní funkce, budeme psát náš kód.

$('ul li').on('click', function(){
   ... kód ...
});

Nyní si připíšeme podmínku, pokud bude $(this) obsahovat třídu .aktivni.

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

Super, po pár proklicích vidíme, že nám vše hezky funguje.

Musím ale přiznat, že tento kód je poměrně delší a pokud nechceme krom přidání tříd nic dalšího vykonávat, není to nejideálnější.

Lepší cestou je využít funkci .toggleClass().

.toggleClass()

Funkce .toggleClass() nám přepne třídu a dokáže nám přepnout třídu také v závislosti na nějaké podmínce.

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

A pokud chceme změnit pro nějakou podmínku, například:

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

Což nám udělá to, že pokud bude cislo dělitelné 2mi (beze zbytku => zbytek 0), dosadí se nám třída .mojeTrida.

Ukázka #5

Ukažme si tedy náš minulý případ při kliku pro výměně tříd.

Jako minule si připravíme událost:

$('ul li').on('click', function(){
   ... kód ...
});

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 hodně malým kódem, na což je jQuery senzační.

ToggleClass v jQuery

Ukázka #6

To ale není všechno, co se dá dělat s těmito funkcemi udělat. Můžeme místo prostého napsání atributu 'mojeTrida' použít také anonymní funkci, která v sobě bude mít různé podmínky a podobně, které nám vždy vrátí nějakou třídu.

Ukažme si třeba 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.

Samozřejmě si uděláme takovýto kód:

$('ul li').addClass(function(){
   ... kód ...
});

A dovnitř si napíšeme tuto jednoduchou podmínku.

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

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

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

Všechno nám funguje dobře, zvýrazní se nám jen PHP a u ostatních vidíme třídu .chciBytPHP.

jQuery tutoriály pro práci s třídami v JavaScriptu

Někdo se možná ptá, jak je možné, že se nám obarví jen 'PHP' aniž použijeme .each() nebo něco podobného. No, to je jednoduché, ono se to chová podobně jako .each(), prostě to vezme první shodu selektoru a ověří na tom naší podmínku, pak vezme druhý a znova ověří naší podmínku a tak dále...

Zkuste si i další různé situace... :)


 

Stáhnout

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

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (10 hlasů) :
55555


 


Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Selektory v jQuery, část první

 

 

Komentáře

Avatar
Taskkill
Redaktor
Avatar
Taskkill:

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
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:

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:

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
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:

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
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Taskkill
Honza Bittner:

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

Odpovědět  +1 9.3.2014 23:16
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Honza Bittner
Taskkill:

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

 
Odpovědět 10.3.2014 20:37
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 9 zpráv z 9.