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ó.

Advertisements

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s