Pourquoi javascript/jquery-feature ne peut-il pas être appliqué à plusieurs nœuds?

Question

J'ai un petit javascript qui change le titre d'un champ d'entrée à sa valeur et quelques autres trucs:

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

}); 
    } 

Lorsque je tente d'utiliser ce script sur une classe qui se trouve sur plusieurs nœuds sur une page il ne fonctionne que sur le premier. Par exemple:

autoFill(".field"); 

Maintenant, je dois le faire comme ceci:

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

comment puis-je faire pour que cela fonctionne sur tous les champs à la place?

Answer 1

Quelque chose comme cela fonctionne:

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"); 
    } 
    }); 
} 

L'important est le contrôle .val() au début, il devient le .val() du premier match, vous devez gérer chaque séparément.

---

Ou, réécrire comme un plugin comme ceci:

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

Ensuite, vous pouvez l'appeler comme ceci:

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