Pourquoi ma fonction jquery .each() ne fonctionne-t-elle pas correctement?

Question

J'ai écrit cette fonction :

jQuery(document).ready(function() {
    jQuery('input[type=text]').each( function(i) {
        thisval = jQuery(this).val();

        jQuery(this).blur( function() {
            if (jQuery(this).val() == '') {
                jQuery(this).val(thisval);
            }
        }); // fin de la fonction blur
        jQuery(this).focus( function() {
            if (jQuery(this).val() == thisval) {
                jQuery(this).val('');
            };
        }); // fin de la fonction focus
    }); // fin de la fonction each
}); // fin de la fonction ready du document

Elle est conçue pour récupérer la valeur d'une entrée, puis si l'utilisateur clique ailleurs sans saisir une nouvelle valeur, l'ancienne valeur revient. Cela fonctionne correctement avec l'une des entrées sur la page, mais pas avec les autres. Cependant, lorsque je supprime les fonctions .blur et .focus et utilise simplement alert(thisval); cela alerte le nom de chaque entrée, donc quelque chose ne va pas avec ma fonction, mais je ne peux pas le comprendre. Une aide ?

Answer 1

Vous avez besoin de var lors de la déclaration de votre variable pour qu'elle ne soit pas partagée de manière globale, comme ceci :

var thisval = jQuery(this).val();

Également, étant donné que vous travaillez spécifiquement avec des inputs textuels, vous pouvez simplement utiliser la .value propriété du DOM, comme ceci :

jQuery(function() {
  jQuery('input[type=text]').each(function(i) {
    var thisval = this.value;
    jQuery(this).blur( function() {
        if (this.value == '') this.value = thisval;
    }).focus( function() {
        if (this.value == thisval) this.value = '';
    });
  });
});

Answer 2

Thisval est une variable globale donc elle est remplacée à chaque boucle. Rendez-la locale [mettez var devant] et elle devrait fonctionner comme par magie.

Vous ne devriez pas simplement continuer à créer jQuery(this) encore et encore. C'est très inefficace. jQuery(this) est cher. Vous devriez stocker une copie dans une variable et utiliser cette variable.