Optimize code jquery

Question

$(textBox).focus(function() { 
    $(spans).css({"background-position": "0 100%"}); 
}); 
$(textBox).blur(function() { 
    $(spans).css({"background-position": "0 0"}); 
}); 

déjà court mais il est soit je suis trop parano, ou nous pourrions coder ce court par

$(textBox).bind('focus blur', function() { *do toggle here* }); 

ou autre chose.

Toute aide serait grandement appréciée. =)

Answer 1

Essayez ceci:

$(textBox).focus(function(){...}).blur(function() {...}); 

Et oui, vous pouvez également utiliser la fonction bind() que vous avez spécifié.

Je trouve ma version plus lisible.

Bonne chance!

Answer 2

Je pense qu'il y a une limite entre l'optimisation et la clarté du code. Sans autre preuve, je ne crois pas que vous verrez des améliorations majeures en ce qui concerne les optimisations. Garder ces deux éléments séparés permet un balayage très rapide et facile ... Pas de logique à franchir. C'est juste "Quand cela arrive, alors faites-le". Simple et vous perdez probablement, voire rien, très peu.

Edit: Si comme vous l'avez mentionné dans un commentaire que vous voulez activer la classe, vous pourriez

$(textBox).bind('focus blur', function() { 
var currentClass = $(this).attr('class'); 
var newClass = currentClass == 'gotFocus' ? 'noFocus' : 'gotFocus'; 
$(this).removeClass(currentClass).addClass(newClass); }); 

Answer 3

Si vous souhaitez utiliser la même fonction pour les deux événements, vous devez utiliser un moyen de changer l'effet qui peut être utilisé pour le faire tourner dans les deux sens. Quelque chose comme:

$(textBox).bind('focus blur', function() { $(spans).toggleClass('over'); }); 

S'il y a beaucoup d'éléments que vous souhaitez modifier l'effet, vous devriez envisager d'utiliser l'effet de cascade de CSS au lieu de laisser jQuery changer la classe pour tous les éléments, à savoir changer la classe pour un seul élément parent, et ont un style qui cible tous les éléments de l'enfant que vous souhaitez affecter:

#container span { background-position: 0 0; } 
#container.over span { background-position: 0 100%; } 

Modification de la classe du parent va changer le style de tous les enfants touchés:

$(textBox).bind('focus blur', function() { $('#container').toggleClass('over'); }); 

Answer 4

$("#test").bind("focus blur", function (e) { 
    $(spans).css({"background-position": e.type === "focus" ? "0 100%" : "0 0"}); 
}); 

Answer 5

Vous pouvez essayer cela aussi:

$(textBox).bind('focus blur', function(e) { 
    var bg = (e.type=='blur') ? '0 0' : '0 100%'; 
    $(spans).css({"background-position": bg}); 

});