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

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

1 个答案: