Függvény paraméter változóként

Függvény paraméter változóként
2016-12-13T21:29:12+01:00
2016-12-13T22:28:42+01:00
2022-12-04T05:55:36+01:00
Csabi95
Sziasztok!
Van egy függvényem ami javascript eseményt ad a HTML elemekhez. Olyan problémám lenne, hogy a lenti függvény változót tesz a paraméterbe, nem pedig a változó értékét, ami miatt minden generált elem 1. argumentuma ugyanaz lesz.

for (i = 0;i < cards.length;i++) { card = cards[i]; html = this.getCardHTML(card); this.addEvent(html, "click", function() { obj.move(card, "sel")}); document.getElementById("myCards").appendChild(html); } ...
addEvent: function(elem, event, func) { if (elem.addEventListener) { elem.addEventListener(event, func); } else if (elem.attachEvent) { event = (event == "click") ? "onclick" : event; elem.attachEvent(event, func); }
Ha pedig megnézem a forrást, akkor gy néz ki az "onclick" esemény:

game.move(card, "sel")
Ki lehet ezt valahogy küszöbölni?
Előre is köszi a segítséget.
Mutasd a teljes hozzászólást!
Érdemes észben tartani, hogy amikor az eseménykezelő lefut, akkor az éppen aktuális card értéket fogja "látni" és nem azt ami az eseménykezelő létrehozásakor volt.

Megoldani többféleképpen lehet - teljesség igénye nélkül pár lehetőség:

1. a Javascript lehetőség ad arra, hogy olyan függvényt hozzál létre aminél fixen be tudod drótozni az első paramétereket illetve a this értékét is - ez a "bind":

this.addEvent(html, "click", obj.move.bind(obj, card, "sel"));
és egy jó dolog ide kapcsolódóan:

function foo(a,b,c,d){ console.log(a,b,c,d); } var bar = foo.bind(this, 1, 2); bar(); // 1, 2, undefined, undefined bar(3, 4); // 1, 2, 3, 4
(régebbi IE böngészők nem támogatják: Can I use... Support tables for HTML5, CSS3, etc)

2. lehet játszani a scope-okkal is - ez rondább megoldásokat eredményez, de ugyanúgy működik:

for (i = 0;i < cards.length;i++) { (function(card,self){ html = self.getCardHTML(card); self.addEvent(html, "click", function() { obj.move(card, "sel")}); document.getElementById("myCards").appendChild(html); })(cards[i],this); }
vagy másik függvénnyel is lehet biztosítani a megfelelő scope-ot:

function create_move_callback(obj, card, ev) { return function() { obj.move(card, ev); }; } ... for (i = 0;i < cards.length;i++) { card = cards[i]; html = this.getCardHTML(card); this.addEvent(html, "click", create_move_callback(obj, card, "sel")); document.getElementById("myCards").appendChild(html); }
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd