/ / Używanie $ (this) podczas wywoływania wtyczki opartej na elementach - javascript, jquery, jquery-plugins

Używanie $ (this) podczas wywoływania wtyczki opartej na elementach - javascript, jquery, jquery-plugins

Tworzę wtyczkę do jQuery. Nie zamierzam tutaj wyjaśniać wtyczki, więc dla uproszczenia powiedzmy, że moja wtyczka otwiera alert po kliknięciu docelowego elementu. Oto prosta wersja mojej wtyczki.

(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);

Mogę dojść tak daleko. Działa świetnie. Jednak jeśli wywołam moją wtyczkę w ten sposób:

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

Komunikat powraca jako „Hello undefined”, wolałbym, aby był to „Hello simon” (klasa znacznika H1).

Jestem pewien, że jest to najprostsza rzecz do zrobienia, ale nie jestem nawet pewien, czym powinienem być Googling, aby znaleźć rozwiązanie.

Każda pomoc będzie bardzo ceniona!

Twoje zdrowie,
Będzie

Aktualizacja:

Po krótkiej zabawie wydaje się, że to działa ... I nie mam pojęcia, dlaczego! Nie sądzę, że naprawdę rozumiem jeszcze zakres. Myślę, że pójdę trochę poczytać.

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

Odpowiedzi:

2 dla odpowiedzi № 1

Zapisz odniesienie do elementu:

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

Inaczej this odnosi się do window który nie ma klasy.


2 dla odpowiedzi nr 2

Jeśli chcesz móc korzystać this dla wygody możesz na to pozwolić message aby zaakceptować funkcję, która zwraca wartość, którą chcesz wyświetlić.

Wypróbuj 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 dla odpowiedzi № 3

w momencie wywoływania wtyczki i przekazywania opcji .. this odnosi się do window a NIE element, jak się wydaje