如何缩短我的嵌套if / else语句？

Question

I have the following js code:

var currentUrl = location
if(/s01/.test(currentUrl)||/s02/.test(currentUrl)){
    $('#info,#name').removeClass('onselect').addClass('offselect');
    if(/s01/.test(currentUrl)){
        $('#AA').removeClass('offselect').addClass('onselect');
    } else if(/s02/.test(currentUrl)){
        $('#BB').removeClass('offselect').addClass('onselect');
    }
} else {
    .....
} 

The code has the same part in nested if/else statements:

if(/s01/.test(currentUrl) {

} else if(/s02/.test(currentUrl) {

}

Can I shorten it to something like:

if(a){

} else if(b){

}

Or any other suggestions?

Answer 1

An alternative version, which will give you option to expand in future:

var offelements = "#info,#name,#AA,#BB";
var onelements = "";

if (/s01/.test(currentUrl)) onelements = "#AA";
else if (/s02/.test(currentUrl)) onelements = "#BB";
// etc: else if (/s03/.test(currentUrl)) onelements = "#CC";

if (onelements !== "")
{
    $(offelements).removeClass('onselect').addClass('offselect');
    $(onelements).removeClass('offselect').addClass('onselect');
}

Also, if you add a class to all the items instead of using IDs, you could use:

var offelements = ".onoffelements";

Answer 2

Given

var a = /s01/.test(currentUrl)
var b = /s02/.test(currentUrl)

You can do something like:

if (a||b) {
    $('#info,#name').removeClass('onselect').addClass('offselect');
    if (a) {
        $('#AA').removeClass('offselect').addClass('onselect');
    } else if (b) {
        $('#BB').removeClass('offselect').addClass('onselect');
    }
} else {
    ...
}

or

if (a) {
    $('#info,#name').removeClass('onselect').addClass('offselect');
    $('#AA').removeClass('offselect').addClass('onselect');
} else if (b) {
    $('#info,#name').removeClass('onselect').addClass('offselect');
    $('#BB').removeClass('offselect').addClass('onselect');
} else {
    ...
}

Answer 3

A slightly different approach for easier extensibility :)

var mapUrlPartIds = { "s01": "AA", "s02": "BB" },
    rxUrlParts = new RegExp(Object.keys(mapUrlPartIds).join("|")),
    match = (currentUrl.match(rxUrlParts) || []);

if (match.length && mapUrlPartIds[match[0]]) {
  $('#info,#name').removeClass('onselect').addClass('offselect');
  $(mapUrlIds[match[0]]).removeClass('offselect').addClass('onselect');
}

fiddle

Answer 4

Version with a single variable

Given

var a = /s01/.test(currentUrl) << 0
      + /s02/.test(currentUrl) << 1
;

You can do something like:

if(a){
    $('#info,#name').removeClass('onselect').addClass('offselect');

    if(a & (1<<0)){
        $('#AA').removeClass('offselect').addClass('onselect');
    } else
    if(a & (1<<1)){
        $('#BB').removeClass('offselect').addClass('onselect');
    }
} else {
    …
}