/ / Použitie $ (toto) pri volaní doplnku založeného na prvkoch - javascript, jquery, jquery-plugins

Použitie $ (toto) pri volaní element-based plugin - javascript, jquery, jquery-plugins

Vytváram doplnok pre jQuery.Nepokúsim sa tu vysvetliť doplnok, takže pre jednoduchosť povedzme, že môj doplnok otvorí upozornenie, keď kliknete na cieľový prvok. Tu je jednoduchá verzia môjho pluginu.

(function($) {

// Options
var defaults = {
message:    "Default message"
};

var options = $.extend(defaults, options);

$.fn.jAlert = function(options) {
return this.each(function(){

var $this = $(this);

$this.click(function(){
alert(options.message);
});

});
};
})(jQuery);

Môžem sa dostať tak ďaleko. Funguje to výborne. Ak však zavolám svoj plugin takto:

$("h1.simon").plugin({ message: "Hello " + $(this).attr("class") });

Správa sa vráti ako „Hello undefined“, radšej by som mala byť „Hello simon“ (trieda značky H1).

Som si istý, že toto je najjednoduchšia vec, ale nie som si ani istý, čo by som mal hľadať v Googli, aby som našiel riešenie.

Akákoľvek pomoc by bola veľmi ocenená!

Na zdravie,
vôľa

aktualizácia:

Po troche hrania sa zdá, že to funguje ... A vôbec netuším prečo! Nemyslím si, že ešte naozaj rozumiem rozsahu. Myslím, že si niečo prečítam.

$("h1.simon").click(function(){
$(this).jAlert({
icon:   "Hello " + $(this).attr("class")
});
});

odpovede:

2 pre odpoveď č. 1

Uložiť odkaz na prvok:

var $el = $("h1.simon");
$el.plugin({ message: "Hello " + $el.attr("class") });

Inak this odkazuje na window ktorá nemá triedu.


2 pre odpoveď č. 2

Ak chcete byť schopní používať this pre pohodlie ste mohli povoliť message prijať funkciu, ktorá vráti hodnotu, ktorú chcete zobraziť.

Vyskúšaj to: http://jsfiddle.net/9hyJc/

(function($) {

$.fn.jAlert = function(options) {

// Options
var defaults = {
message:    "Default message"
};

var options = $.extend(defaults, options);

return this.each(function(){

var $this = $(this);

$this.click(function(){
if($.isFunction(options.message)) {
// If it is a function, call it,
//    setting "this" to the current element
alert(options.message.call(this));
} else {
// Otherwise, assume it is a string
alert(options.message);
}
});

});
};
})(jQuery);

$("h1.simon").jAlert({ message: function() { return "Hello " + $(this).attr("class"); } });

0 pre odpoveď č. 3

v čase, keď voláte doplnok a odovzdávate možnosti .. this odkazuje na window A NIE prvok, ako sa zdá, že čakáte