ugrás a tartalomhoz

jQuery click eventre this átadása

gtoma · 2014. Szep. 8. (H), 14.07
Van egy gyakorlati, és elvi kérdésem. Izzaszt a dolog már rég óta.
A jelenlegi problémámon keresztül tenném fel a kérdést.

Van egy javascript funkcióm:

var mcChoser = function(args) {
    for (arg in args) { this[arg] = args[arg]; }

    this.Start = function() {
        console.log('start', this.ID);
        self = this;
        $jq('#'+ this.ID +' a').click(function(e){ self.Chosed(e); });
    }

    this.Chosed = function(e) {
        console.log( this );
        if( this.multiple == true ) { $jq(e.currentTarget).toggleClass('active'); }
        else {
            var vane = $jq(e.currentTarget).hasClass('active');
            $jq('#'+this.ID+' a.active').removeClass('active');
            if( vane == false ) { $jq(e.currentTarget).addClass('active'); }
        }
        this.setValues();
    }

    this.setValues = function() {
        var List = $jq('#'+ this.ID +' a.active');
        var HTML = '';
        $jq('#'+this.ID + ' [name="'+ this.inputname +'"]').remove();
        if( List.length > 0 ) { for(i=0; i<List.length; i++) { HTML += '<input type="hidden" name="'+ this.inputname +'" value="'+ $jq(List[i]).data('data') +'">'; } }
        $jq('#'+ this.ID).append(HTML);
    }

    this.Start();
}
Elméletileg működik a dolog. HTML:

<div data-input="type" id="filetype" class="iconlist">
        <a class="btn-icon" title="Képek" data-data="kep" href="javascript:void(0);" ><i class="fa fa-file-image-o"></i></a>
        <a class="btn-icon" title="Média" data-data="media" href="javascript:void(0);"><i class="fa fa-file-movie-o"></i></a>
        <a class="btn-icon" title="Dokumentum" data-data="documentum" href="javascript:void(0);"><i class="fa fa-file-text-o"></i></a>
        <a class="btn-icon" title="Egyéb" data-data="egyeb" href="javascript:void(0);"><i class="fa fa-file-word-o"></i></a>
        </div>
És az indítás:
filetype = new mcChoser({ID:"filetype"});
Ami a gond, hogy ha 2 id-re akarom indítani a funkciót, akkor bizony az utolsó indítás adatait használja meg.

http://jsfiddle.net/4xgf2vsh/5/
Itt látszik is, hogy az alsó sor működik, a felső be van zavarodva, de ha az alsó sor indítását kiszedjük, akkor működik a felső sor.

azaz a this változó felülíródik az előtte lévők esetében is, hogyan hivatkozhatnék a példányosított verzióra?! Vagy hogyan adhatnám át a this változót, hogy azt használja?
‹ Htacces -ben nem működik az url átalakítás Input előzmények eltüntetése ›
 ■
1

bind / $.proxy

Poetro · 2014. Szep. 8. (H), 14.17
Inkább Function#bind-ot vagy $.proxy-t használnék:
$('#'+ this.ID +' a').click($.proxy(this.Chosed, this));
Ez megoldja a this értékét.
Igazából az igazi probléma hogy a self egy globális változó, és az utolsó értéke nem az, mint amire számítasz.
2

var

Endyl · 2014. Szep. 8. (H), 14.20
A problémádat konkrétan az okozza, hogy a globális névtérben használod a self változót ahelyett, hogy deklarálnád var használatával a függvényen belül.
3

Szégyenlem

gtoma · 2014. Szep. 9. (K), 10.25
Igen, a var hiányzott. Szégyenlem, hogy fel sem tűnt...

Köszönöm nektek! :(
4

Szerintem a hiba nem a var

spapp · 2014. Szep. 10. (Sze), 11.40
Szerintem a hiba nem a var hiánya volt!
A hiba az, hogy akartál self változót használni!

Így kellett volna (minimum):
$jq('#'+ this.ID +' a').click(this.Chosed.bind(this));
De még pontosabban:

this._element = $(this.ID);
this._elenet.delegate('a', 'click', this.Chosed.bind(this));
És mindezt a construktorban, mert a Start függvénynek sok hasznát és értelmét nem látom. Főleg nem a construktorban létrehozva (ez igaz a többire is).

Remélem azért ezzel a kóddal nem vagy elégedett?!
Mert ez nagyon-nagyon-nagyon nincs rendben!
Ez egy "állatorvosi ló"!