CODEWITHSUNDEEP
javascriptjqueryhtml
harley_woop
harley_woop

Reputation: 1849

jQuery: Add class depending on URL in the best way

I have this HTML for a progress meter:

<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>

I use the following jQuery to add/remove classes depending on the 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");
    }
});

I know that this isn't the best way to acomplish this (Even though the code does work), as I have to repeat the same thing over and over. I have tried prev() but it didn't seem to work.

What is the best way to go about it?

EDIT: To be clear, not all elements apart from the one with the active class should be given the class of active, just the ones prior.

EDIT 2:

Current Activity:

User is on page ?route=account/login&SSL, #progress-1 is give the class of .active.

User progresses to ?route=checkout/cart sucessfully, and #progress-1 is given the class of .inactive and #progress-2 is .active

User progresses to ?route=checkout/checkout sucessfully, and #progress-1 & #progress-2 are given the class of .inactive and #progress-3 is .active and so on.

Upvotes: 1

Views: 377

Answers (1)

Jordan Lowe
Jordan Lowe

Reputation: 368

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

This can also be achieved by replacing the if statement with a switch.

Upvotes: 2

Related Questions