Использование $ (this) при вызове элементарного плагина

Question

Я создаю плагин для jQuery. Я не буду пытаться объяснить этот плагин здесь, так что для простоты скажем, что мой плагин открывает предупреждение, когда вы нажимаете на целевой элемент. Вот простая версия моего плагина.

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

Я могу зайти так далеко. Он отлично работает. Однако, если я называю плагин так:

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

сообщение возвращается как «Hello неопределенными», я бы предпочел, чтобы быть «Hello симон» (класс тега H1).

Я уверен, что это самое простое дело, но я даже не уверен, что должен быть Google, чтобы найти решение.

Любая помощь была бы принята с благодарностью!

Приветствия,
Will

Update:

После игры о немного, это похоже на работу ... И я понятия не имею, почему! Я не думаю, что я действительно понимаю сферу действия. Думаю, я пойду немного почитать.

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

Answer 1

Сохранить ссылку на элемент:

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

В противном случае this относится к window, который не имеет класс.

Answer 2

в то время вы вызываете плагин и проходящей варианты .. this относится к window и НЕ элемент, как вы, кажется, ожидать

Answer 3

Если вы хотите, чтобы иметь возможность использовать this для удобства, вы могли бы позволить message, чтобы принять функцию, которая возвращает значение, которое вы хотите отобразить.

Попробуйте: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'); } });