JQuery: Добавить класс в зависимости от URL наилучшим образом

Question

у меня есть этот HTML для измерителя прогресса:

<div class="col-md-3" style="margin-left: -20px;"> 
    <div class="progress-pos active" id="progess-1"> 
    <div class="progress-pos-inner"> 
     Login 
    </div> 
    </div> 
</div> 
    <div class="col-md-3 progress-pos-container"> 
    <div class="progress-pos" id="progess-2"> 
    <div class="progress-pos-inner"> 
     Scan Items 
    </div> 
    </div> 
</div> 
    <div class="col-md-3 progress-pos-container"> 
    <div class="progress-pos" id="progess-3"> 
    <div class="progress-pos-inner"> 
     Confirm Address 
    </div> 
    </div> 
</div> 
    <div class="col-md-3 progress-pos-container"> 
    <div class="progress-pos" id="progess-4"> 
    <div class="progress-pos-inner"> 
     Finished 
    </div> 
    </div> 
</div> 

Я использую следующий JQuery, чтобы добавить/удалить классы в зависимости от URL.

$(document).ready(function() { 
    if(location.search == "?route=account/login&SSL"){ 
    $("#progess-1").addClass("active"); 
    } 
    if(location.search == "?route=checkout/cart"){ 
    $("#progess-2").addClass("active"); 
    $("#progess-1").addClass("inactive"); 
    } 
    if(location.search == "?route=checkout/checkout"){ 
    $("#progess-3").addClass("active"); 
    $("#progess-1").addClass("inactive"); 
    $("#progess-2").addClass("inactive"); 
    } 
    if(location.search == "?route=checkout/success"){ 
    $("#progess-4").addClass("active"); 
    $("#progess-1").addClass("inactive"); 
    $("#progess-2").addClass("inactive"); 
    $("#progess-3").addClass("inactive"); 
    } 
}); 

Я знаю, что это не лучший способ acomplish это (Даже если код работает), я должен повторить то же самое снова и снова. Я пробовал prev(), но он, похоже, не работал.

Каков наилучший способ?

EDIT: Чтобы было ясно, что не все элементы отдельно от одного с active класса следует класс active, только те, которые до этого.

EDIT 2:

Текущая активность:

Пользователь на странице ?route=account/login&SSL, #progress-1 это дать класс .active.

Пользователь прогрессирует ?route=checkout/cart успешно, и #progress-1 дается класс .inactive и #progress-2 является .active

Пользователь прогрессирует ?route=checkout/checkout успешно, и #progress-1 & #progress-2 приведены класс .inactive и #progress-3 является .active и так далее.

Answer 1

$(document).ready(function() { 

    // Re-set all on entry 
    $("#progess-1, #progess-2, #progess-3, #progress-4").removeClass("inactive active"); 

    // Then check for the correct one to make active 
    if(location.search == "?route=account/login&SSL") 
     $("#progess-1").addClass("active"); 
    else if(location.search == "?route=checkout/cart") 
    { 
     $("#progess-2").addClass("active"); 
     $("#progess-1").addClass("inactive"); 
    } 
    else if(location.search == "?route=checkout/checkout") 
    { 
     $("#progess-3").addClass("active"); 
     $("#progess-1,#progess-2").addClass("inactive"); 
    } 
    else if(location.search == "?route=checkout/success") 
    { 
     $("#progess-4").addClass("active"); 
     $("#progess-1,#progess-2,#progess-3").addClass("inactive"); 
    } 
}); 

Это также может быть достигнуто путем замены оператора if коммутатором.