javascript - 为什么javascript/jquery-feature不能应用于多个节点？

Question

我有一个小的 javascript，可以将输入字段的标题更改为其值和其他一些内容:

  function autoFill(id){
   if(jQuery(id).val()==""){
                    jQuery(id).val(jQuery(id).attr("title"))
                    .addClass("help");
             }; 
    jQuery(id).focus(function(){
    if(jQuery(this).val()==jQuery(this).attr("title")){
     jQuery(this).val("").removeClass("help");
    }
   })
   .blur(function(){
    if(jQuery(this).val()==""){
     jQuery(this).val(jQuery(this).attr("title"))
     .addClass("help");

    }
   });
   jQuery(".trip").submit(function(){
    if(jQuery(id).val() == jQuery(id).attr("title")){
    jQuery(id).val(''); 
  }

 });
  }

当我尝试在一个页面上多个节点上的类上使用此脚本时，它仅适用于第一个节点。例如:

autoFill(".field");

现在我必须改成这样:

 autoFill("#driver_from");
  autoFill("#driver_to");
  autoFill("#driver_when");
  autoFill("#passenger_from");
  autoFill("#passenger_to");
  autoFill("#passenger_when");

如何使其适用于每个领域？

Answer 1

像这样的东西会起作用:

function autoFill(selector){
  jQuery(selector).each(function() {
    if(jQuery(this).val() == "") {
      jQuery(this).val(jQuery(this).attr("title"))
                  .addClass("help");
    }; 
    jQuery(".trip").submit(function(){
      if(jQuery(this).val() == jQuery(this).attr("title")) {
         jQuery(this).val(''); 
      }
    });
  }).focus(function(){
     if(jQuery(this).val() == jQuery(this).attr("title")) {
        jQuery(this).val("").removeClass("help");
     }
  }).blur(function(){
     if(jQuery(this).val() == "") {
        jQuery(this).val(jQuery(this).attr("title"))
                    .addClass("help");
     }
  });
}

重要的部分是.val()检查开头，它得到 .val()对于第一个匹配，您需要单独处理每个匹配。

<小时/>

或者，将其重写为插件，如下所示:

(function($) {    
  $.fn.autoFill = function() {
     return this.each(function() {
       $(".trip").submit(function(){
         if($(this).val() == $(this).attr("title")) {
           $(this).val(''); 
         }
       });
     }).focus(function(){
        if($(this).val() == $(this).attr("title")) {
           $(this).val("").removeClass("help");
        }
     }).blur(function(){
        if($(this).val() == "") {
           $(this).val($(this).attr("title")).addClass("help");
        }
     }).blur();
  };
})(jQuery);

然后你可以这样调用它:

$(".field").autoFill();