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＆amp; #progress-2的课程为.inactive，#progress-3为.active，依此类推。

Answer 1

id="changelist-form"

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

jQuery：以最佳方式

1 个答案: