Возможная проблема с областью с плагином jQuery? - PullRequest
2 голосов
/ 17 мая 2011

Я пытаюсь создать плагин jquery (просто для удовольствия) и не могу определенным образом делать то, что хочу.

(function($){

    var resetText = function(){ if (this.value == "") this.value = this.title; }
    var clearText = function(){ if (this.value == this.title) this.value = ""; }

    $.fn.placeHolder = function() {
        return this.each(function(){
            resetText(); // <-- this doesn't work
            $(this).focus(clearText).blur(resetText);
        });
    };
})(jQuery);

По сути, я хочу, чтобы атрибут title был скопирован в атрибут value (если значение пусто) в doc.ready И в field.blur

Как и сейчас, он работает на Blur, но не на документе.

У меня такое ощущение, что это масштабная вещь, но, честно говоря, я не знаю, как это исправить.

Убедитесь сами: http://jsfiddle.net/Usk8h/

Ответы [ 2 ]

3 голосов
/ 17 мая 2011

У вас есть проблема this, а не область действия.

Сделайте это вместо:

resetText.call( this );

Метод .call() позволяет вам установить значениеthis в функции resetText() для того, что вы передаете в качестве первого аргумента.

В этом случае вы передаете элемент DOM, представленный this в .each().


РЕДАКТИРОВАТЬ:

Вы действительно можете уменьшить свой плагин до этого:

$.fn.placeHolder = function() {
    return this.focus(clearText).blur(resetText).blur(); // <-- triggers blur
};
0 голосов
/ 17 мая 2011

Кажется, это проблема области видимости. Как насчет этого?

http://jsfiddle.net/Usk8h/1/

(function($){

    var resetText = function(myThis){ if (myThis.value == "") myThis.value = myThis.title; }
    var clearText = function(myThis){ if (myThis.value == myThis.title) myThis.value = ""; }

    $.fn.placeHolder = function() {
        return this.each(function(){
            resetText(this);
            $(this)
                .focus(function(){
                    clearText(this);
                }).blur(function(){
                    resetText(this);   
                });
        });
    };
})(jQuery);
...