JQueryプラグインがマイページに2回以上呼び出されていません

Question

私は、フォーカスがあるときにテキストボックスを空白にし、テキストの値をパラメータの値に設定してテキストボックスを再描画するJQueryプラグインを使用しています。 私は自分のページで指定したテキストボックスごとに呼び出されたいのですが、最後に指定したものだけが呼び出されます。次のように

プラグインコードが行く：

(function($){ 

    $.fn.foco = function(value){ 

     if ($(this).length) { 

       var text = { 
        texto:null 
        }; 
       enfocar = $.extend(text , value);  

       $(this).val(enfocar.texto); 

       $(this).focus(function(){ 
        if($(this).val() == enfocar.texto) 
          $(this).val('');      
       }).blur(function(){ 
        if($(this).val() == '') 
         $(this).val(enfocar.texto);      
       });    


     } else { 

       return false; 

     } 

    } 

})(jQuery); 

とそのこうして私のページと呼ばれる：私は複数回それを呼び出すようにしようとしたとき

('#start').foco({texto:'Enter the start text'}); //Works fine 

しかし：

('#start').foco({texto:'Enter the start text'}); //Doesn't work 
('#end').foco({texto:'Enter the end text'});  //Does work 

あなたは私がそれをどのように達成できるかを理解する手助けをすることができるのだろうかと思います。

Answer 1

enfocarはグローバルです。ローカルにする。

var enfocar; 

あなたのプラグインは、おそらくこのような.eachを使用する必要があります。私は、「伝統的な複数要素モデル」（ない実際のキーワードにしてそれを回すだろう

(function ($) { 
    $.fn.foco = function (value) { 
     return this.each(function() { 
      var text = { texto: null }, 
       enfocar = $.extend(text, value); 

      $(this).val(enfocar.texto) 
        .focus(function() { 
         if ($(this).val() == enfocar.texto) $(this).val(''); 
        }).blur(function() { 
         if ($(this).val() == '') $(this).val(enfocar.texto); 
        }); 
     }); 
    }; 
})(jQuery); 

Answer 2

、しかし私は、伝統的な考慮方法）。基本的に、あなたのプラグインでは、コレクションに指定されているさまざまな要素（セレクタによって）をループしたいと思っています。また、連鎖を許可するために、この要素を返して、続けることができます。例えば

;(function($){ 
    $.fn.foco = function(opts){ 

    var defaultOpts = { 
     texto: null 
    }; 
    opts = $.extend({}, defaultOpts, opts); 

    // here's where we return the collection back. But, at the same time we 
    // iterate over the collection of matched elements 
    return this.each(function(i,e){ 

     var el = $(this); 

     // insert handling code here, based on "el" is 
     // the element in question 

    }); 
    }; 
})(jQuery); 


// implementation: 
$('#a').texto({ texto: 'Search...' }); // single element 
$('.required').texto({ texto: '(required)' }); // multiple elements 

しかし、@Stefanコメントで述べたように、watermarkはどこへ行くより良いルート（再発明していないホイール）であってもよいです。 HTML5には新しい "プレースホルダ"属性があり、これをネイティブに保ちながら正確に行います。サポートされていない場合は、JSコードに戻ります。ただし、JSを使用しないと、自分で直接管理していないときに、プレースホルダ/透かしテキストのスタイルを設定するのが難しくなります。

-

マイ入札（with example）あなたは好奇心旺盛だ場合：

(function($){ 
    $.fn.texto = function(watermark){ 
     return this.each(function(){ 
      var $el = $(this); 

      // optional class name we can apply while they're watermarked. 
      var watermarkClass = 'watermarked'; 

      $el.focus(function(){ 
       if ($el.val() == watermark){ 
        $el.val('') 

        // adding the class is optional, but decorative 
        $el.removeClass(watermarkClass); 
       } 
      }).blur(function(){ 
       if ($el.val() == ''){ 
        $el.val(watermark); 

        // remove the class (again, optional) 
        $el.addClass(watermarkClass); 
       } 
      }); 

      // intitial setup 
      if ($el.val() == '') 
      { 
       $el.val(watermark); 

       // once again, class is optional 
       $el.addClass(watermarkClass); 
      } 
     }); 
    }; 
})(jQuery); 

$('.texto').texto('Enter text...');