Emlékeztetésképp idézzük fel újra a jQuery működésének három lépését:

1. Kiválasztasz egy vagy több HTML-elemet.
2. A kiválasztott elemeken elhelyezel valamilyen eseményfigyelőt (event listenert).
3. Az esemény megvalósulásakor végrehajtasz egy műveletet.

Az első két lépést mostanra már ismered. Ebben a fejezetben a harmadikkal kezdünk el foglalkozni: a műveletekkel.

A figyelt esemény megvalósulásakor végrehajtható műveletek közé tartoznak a különböző jQuery-effektusok. Párat már láttál is közülük az előző fejezetekben, amikor elemeket rejtettél el vagy animáltál.

Most nézzük meg alaposabban, hogyan is működik egy elem elrejtése. Kérlek, olvasd el ezt a bejegyzést a hide() metódusról. (Amikor a „Syntax” címsorhoz érsz, gyere vissza ide.)

Megjegyzés: Szokás szerint nyomd meg a „Try it Yourself” gombot, hogy lásd a kódot működés közben is.

A példában bizonyára láttad, hogy az elrejtett elemeket egy másik effektussal újra meg lehet jeleníteni. Ehhez a show() metódusra lesz szükséged, melyről itt találsz egy összefoglalót. Kérlek, olvasd el ezt is a „Syntax” címsorig.

A jQuery azonban még ennél is többre képes: egyetlen metódussal meg tudod oldani, hogy a látható elemeket eltüntesd, az elrejtett elemeket pedig megjelenítsd. Ez a metódus a toggle(), melyről itt olvashatsz. Nézd át ezt is, és amikor a „Syntax” címsorhoz érsz, gyere vissza ide.

Megjegyzés: Most is próbáld ki a példakódot a „Try it Yourself” gombra kattintva.

Ha kész vagy, akkor kérlek, végezd el az alábbi feladatot.

Feladat

Az alábbi penbe írj egy kis jQuery-programot, hogy ha a gombra kattintasz, akkor eltűnjön vagy megjelenjen a <div> elem.

A programod a következő kritériumoknak feleljen meg:

• Az event listener a gombra érkező kattintásokra figyeljen.
• A gombra történő klikkeléskor a <div> elemet rejtsd el vagy jelenítsd meg.
• Az elem elrejtéséhez vagy megjelenítéséhez használd a toggle() metódust.
• Ne felejtsd ki a „document ready” eseményt.

Sok sikert!

Megoldás: Amikor elvégezted a feladatot, itt meg tudod nézni az általunk alkotott mintamegoldást. Hasonlítsd össze a kettőt, és ellenőrizd a saját verziódat. Ha minden rendben, akkor menj tovább a következő leckére.