Optimize jquery code

Question

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

This is already short but it's either I am just too paranoid, or we could code this shorter by

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

or something else.

Any help would be greatly appreciated. =)

Answer 1

Try this:

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

And yes, you can also use the bind() function as you specified.

I find my version more readable.

Good luck!

Answer 2

I think there's a line between optimization and code clarity. Without any further evidence, I don't believe you'll see any major improvements as far as optimizations go.

Keeping these two separate allows for a very quick and easy scan... No logic to go through. Its just "When this happens, then do this". Simple and you're probably losing, if anything, very little.

Edit: If like you mentioned in a comment you want to toggle the class, you could

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

Answer 3

If you want to use the same function for both the events, you need to use a way of changing the effect that can be used to turn it both ways. Something like:

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

If there are a lot of elements that you want to change the effect on, you should consider using the cascading effect of CSS instead of letting jQuery change the class for all the elements, i.e. changing the class for a single parent element, and have a style that targets all the child elements that you want to affect:

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

Changing the class of the parent will change the style of all affected children:

$(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

You can try this as well:

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

});