javascript - 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");
    }
});

我知道这不是完成此任务的最佳方法(即使代码确实有效)，因为我必须一遍又一遍地重复同样的事情。我试过 prev() 但它似乎没有用。

最好的方法是什么？

编辑: 需要明确的是，除了具有 active 类的元素之外，并非所有元素都应赋予 active 类，只是之前的那些。

编辑 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");
    }
});

这也可以通过用 switch 替换 if 语句来实现。