How to start optimising/refactoring jQuery code

Question

I have following jQuery code

$('a.editpo, a.resetpass').click(function(event){
    event.preventDefault();
    var urlToCall = $(this).attr('href');
    var hyperlinkid = '#'+$(this).attr('id');
    var targetId = $(this).attr('id').match(/\d+/);
    var targetTrDiv = '#poformloadertr_'+targetId;
    var targetTdDiv = '#poformloadertd_'+targetId;
    var currentLink = $(this).html();
    /*Todo: refactor or shorten the following statement*/
    if((currentLink=='Edit' && $('#resetuserpassform_'+targetId).is(':visible')) 
        ||
       (currentLink=='Reset Pass' && $('#account-home-container-'+targetId).is(':visible'))
        ||
       ($(targetTdDiv).html() =='')
    ){
        $.ajax({
            url:urlToCall,
            success: function(html){
                $(targetTdDiv).html(html);
                $(targetTrDiv).show();
            }
        });
    }else{
        $(targetTrDiv).hide();
        $(targetTdDiv).html('');
    }
});

The editpo and resetpass are classes applied on hyperlinks in column of table, namely Edit and Reset Pass , clicking these load up the form in a table row, ids for the respective tr and td is targetTrDiv and targetTdDiv . I am not good at JS and specially jQuery, but would still be interested in any optimisations.

But I am especially interested in reducing the condition statement.

Answer 1

First, you can optimize the following code:

   var urlToCall = $(this).attr('href');
   var hyperlinkid = '#'+$(this).attr('id');
   var targetId = $(this).attr('id').match(/\d+/);
   var targetTrDiv = '#poformloadertr_'+targetId;
   var targetTdDiv = '#poformloadertd_'+targetId;
   var currentLink = $(this).html();

to:

   var wrappedSet$ = $(this);

   var urlToCall = wrappedSet$.attr('href');
   var hyperlinkid = '#'+wrappedSet$.attr('id');
   var targetId = wrappedSet$.attr('id').match(/\d+/);
   var targetTrDiv = '#poformloadertr_'+targetId;
   var targetTdDiv = '#poformloadertd_'+targetId;
   var currentLink = wrappedSet$.html();

EDIT: Also, you could remove the currentLink=='Edit' && and currentLink=='Reset Pass' && code snippets, because you can be sure that the right links were clicked using the class selector that you are using in your jQuery click handler ( a.editpo, a.resetpass ).

If you do that the codition statement will stays like this:

if(($('#resetuserpassform_'+targetId).is(':visible')) 
        ||
       ($('#account-home-container-'+targetId).is(':visible'))
        ||
       ($(targetTdDiv).html() =='')
    ){
       /* AJAX call goes here */
    }

Besides, and hopefully I'm wrong, it's very unlikely that the condition statement can be more optimized. The reason for concluding this is that you want to much specificity that is likely impossible to achieve in other way.

Hope it helps you.