Question

I have to admit, I came up with this solution by pure intuition from seeing many jQuery scripts during all the time I’ve been experimenting and learning on my own.

Since I don’t have anyone to ask in person these kind of questions, that’s why I come here for help and guidance.

—

Inspired by Wufoo’s plans’ forms where the row you need to focus is highlighted while filling out the form, I created this script (I am not a jQuery or JavaScript guru, I’m still learning and practicing):

//Improve usability by highlighting the row the user needs to focus on:
$(function() {
        //When input element has focus
        $('input').focus(function(){
            //Add the class to its corresponding row
            $(this).parent().parent('.row').addClass('focus'),
                //And when it loses focus
                $('input').blur(function(){
                    //Remove the class
                    $(this).parent().parent('.row').removeClass('focus');
                });
        });
});

So I was wondering if this script has a way of being written better or optimized/shorten in any way. If not, and the way I wrote it’s Ok, that’s fine, all I’d like to learn is ways of optimizing code when possible, that’s all.

I created a Demo in Codepen if you want to check it out.

Thanks in advance.

Answer 1

You can do this:

//Improve usability by highlighting the row the user needs to focus on:
$(function() {
        $('input').focus(function(){
            $(this).closest('.row').addClass('focus'); // Change here                    
        }).blur(function(){ // Change here
           $(this).closest('.row').removeClass('focus'); // Change here
        });
});

Or even shorter!

$(function(){
    $("input").on("focus blur", function(){
        $(this).closest(".row").toggleClass("focus");
    });
});

You did 1 thing totally wrong!! Each time you focus you bind a new blur to each input!