Kezdőlap > CSS, HTML, JavaScript Jquery > Saját jquery függvényünk elkészítése és meghívása

Saját jquery függvényünk elkészítése és meghívása

Weboldal fejlesztés közben, szükségünk lehet egyedi magunk által fejlesztett akár paraméterrel is rendelkező jquery függvényre. Számtalan helyen le van írva,  hogy ha egy click esemény történik akkor, hogyan lehet azt elkapni, és ekkor a kért módosításokat elvégezni, ez mind szép és jó, de ha egy weboldalt generálunk, ahol nem tudjuk előre hány elem és milyen id-vel class-al fog szerepelni, és ezt előre meghatározni nehéz szinte lehetetlen, ekkor én paraméterrel rendelkező függvényt szoktam meghívni ami elvégzi azokat a módosításokat ellenőrzéseket amik szükségesek.

Hogyan néz ki egy paraméterrel rendelkező saját magunk által írt jquery függvény?

Az alábbi példa válasz a fenti kérdésre :

jQuery.fn.fShowElement = function(cid){
if($("#elementid_"+String(cid)).is(':hidden')){
var i = 0;
while($("#elementid_"+String(++i)).length > 0){
$("#elementid_"+String(i)).hide();
}
$("#elementid_"+String(cid)).show();
}
};

A fenti kód annyit csinál, hogy végigfut az oldalon és a #elemntid_1-től amíg létezik az összes ilyen div css display tulajdonságát none-ra állatja majd, a paraméterben kapottat megjeleníti.

Most már van egy függvényünk, ami csinál is valamit, nah de mikor hívjuk meg? Mi azt szeretnénk, hogy ha ez a paraméterrel rendelkező függvény egy bizonyos div-en történő kattintáskor hívódjon meg. Egy bizonyos ez kicsit téves megfogalmazás, ugyanis sejtésünk sincs arra vonatkozóan, hogy a jövőben mindig csak a 3. elem esetén fusson le a függvényünk. Viszont azt tudjuk az oldal generáláskor, hogy ha erre a div-re kattint akkor függvényünket milyen paraméterrel kell meghívni. Így az elemnek definiáljuk az onclick eseményét és hogy mit kell meghívni, ezt a HTML tag onlick eseményében az alábbi módon tehetjük:

onclick="$(this).fShowElement(1);"

Ezzel, egy HTML tag onclick eseményénél megadtuk, hogy hogyan kell meghívni  a saját paraméterrel rendelkező jquery-s függvényünket.

Egyszerűnek tűnik, én is azt gondoltam de több napomba került mire kisilabizáltam, hogyan is kell ezt megvalósítani, mivel szinte sehol sincs leírva ez a hasznos információ.

Kategóriák:CSS, HTML, JavaScript Jquery

MINDEN VÉLEMÉNY SZÁMÍT!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Módosítás )

Twitter kép

You are commenting using your Twitter account. Log Out / Módosítás )

Facebook kép

You are commenting using your Facebook account. Log Out / Módosítás )

Kapcsolódás: %s

Follow

Get every new post delivered to your Inbox.