JQuery if then else using URL parser plugin, there must be a more elegant solution!

Question

Hello everyone.

This is my first post on this rather spiffing website so go easy on me if this has been discussed elsewhere (I can't find it if it has).

I'm using the JQuery URL parser plugin found here: http://projects.allmarkedup.com/jquery_url_parser/

I can get it to do what I want but the code is rather inefficient. I have a collection of hidden div's that are opened when the relevant heading is clicked. I am using the URL parser so that if a link is clicked from another page the relevant div is visible.

My code looks like this:

if 
(jQuery.url.attr('anchor') == 'question1'){
 $('#answer1').show();
}
else if
(jQuery.url.attr('anchor') == 'question2'){
 $('#answer2').show();
}
else if
(jQuery.url.attr('anchor') == 'question3'){
 $('#answer3').show();
}
else if
(jQuery.url.attr('anchor') == 'question4'){
 $('#answer4').show();
}
else if
(jQuery.url.attr('anchor') == 'question5'){
 $('#answer5').show();
}
else if
(jQuery.url.attr('anchor') == 'question6'){
 $('#answer6').show();
}
else if
(jQuery.url.attr('anchor') == 'question7'){
 $('#answer7').show();
}
else if
(jQuery.url.attr('anchor') == 'question8'){
 $('#answer8').show();
};

As you can see this is rather long winded. What I really want to be able to do is take the number at the end of the URL and append it to #answer so that things are far more compact. I was trying to assign the result of (jQuery.url.attr('anchor') to a variable but I'm having a bit of trouble accomplishing this. Any help would be greatly appreciated!

Answer 1

var match = jQuery.url.attr('anchor').match(/^question([0-9]+)$/);
if (match && match.length > 0) {
    $('#answer' + match[1] ).show();
}

Updated.

Answer 2

You can also do this in one single line for code like this.

$('#answer' + $.url.attr('anchor').match(/question(\d+)|(.*)/)[1]).show();

Now, this technique may take some explaining. Basically, what you are doing here is trying to find a string that contains question(n) where where 'question(n)' is the first match and (n) is the second match. Now, if that isn't found then "|(.*)" says "OR Anything", and since it's wrapped in a () the .* anything is the first match and the second match.

With a successful match you are calling

$('answer' + '1').show();

With an unsuccessful match you are calling

$('answer' + '').show();  // where $('answer' + '').length == 0

which does nothing.

if you want to be case insensitive about it use this as your regular expression.

/question(\d+)|(.*)/i