jQuery:以最佳方式根据URL添加类

jQuery: Add class depending on URL in the best way

本文关键字：URL 添加 方式根 最佳 jQuery      更新时间：2023-09-26

>我有这个用于进度表的 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等等。

$( 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 语句替换为开关来实现。

相关文章：