Разработка плагинов jQuery: как мне заставить мой плагин работать с несколькими наборами значений?

Question

У меня есть плагин jQuery:

(function( $ ){
    $.fn.test = function(selector){
        $this = this;

                $(selector).bind("click", function(){
                    methods.showvalue($this);
                });
    };
    var methods = { 
        showvalue   :   function($this){
            var output = "";
            $this.each(function(i,e){
                output += $(e).val();
            })
            alert(output);
        }
    }
})(jQuery);

С этой разметкой:

<form>
    <p>
        First section<br />
        <input type="text" class="test" name="firstValue" value="one" />
        <input type="text" class="test" name="secondValue" value="two" />
        <input type="text" class="test" name="thirdValue" value="three" />
        <button type="button" id="button1">push</button>
    </p>
    <p>
        Second section<br />
        <input type="text" class="test2" name="firstValue2" value="1" />
        <input type="text" class="test2" name="secondValue2" value="2" />
        <input type="text" class="test2" name="thirdValue2" value="3" />
        <button type="button" id="button2">push</button>
    </p>
</form>

и этим инициализатором:

    $(document).ready(function(){

        // first section
        $(".test").test("#button1");

        // second section
        $(".test2").test("#button2");
    });

Независимо от того, какую кнопку я нажимаюЯ всегда получаю строку с "123" в нем.Моя цель - получить «123», когда нажата вторая кнопка, и «одна и та же», когда нажата первая кнопка.

Чего мне не хватает?Почему он так себя не ведет?

Answer 1

Вам нужно объявить

var $this = this;

В противном случае $ this присоединяется к окну и становится глобальным.

Кроме того, вы можете захотеть это вместо этого, чтобы не прикреплятьобратные вызовы:

$.fn.test = function(selector){
    var $this = this;
    $(selector).bind("click", function(){
       methods.showvalue($this);
    });
    return this;
};

РЕДАКТИРОВАТЬ: Демо http://jsfiddle.net/VSDLJ/

Answer 2

Вы должны ссылаться на объект в каждом цикле:

return this.each(function() {  
   obj = $(this);  
});

Или в вашем случае:

return this.each(function() {  
  $this = $(this);
  $(selector).bind("click", function(){
    methods.showvalue($this);
  });
});