Replace url parameter dynamically

Question

I have a script that adds the value from a clicked element. However - I would like to replace the value with the new one when clicked.

Example:

<ul class="acfilter">
 <li><a href="reset">reset</a></li>
 <li><a href="One">One</a></li>
 <li><a href="Two">Two</a></li>
</ul>

Script

$(document).ready(function() {
    $('ul.acfilter li a').on('click', function(e) {
        e.preventDefault();
        if ($(this).attr('href') != "reset") {
            if (location.href.indexOf('?') === -1) {
                location.href = location.href + "?fss=" + $(this).attr('href');
            } else {
                location.href = location.href + "+" + $(this).attr('href');
            }
        } else {
            location.href = location.origin + location.pathname;
        }
    });
});

First parameter onclick gives ?fss=one and on the second click you get ?fss=one+two. The reset link clears it.

However - I would like to replace the "one" value with the "two" value on the click. The value is dynamic - so I cant just do If/Else url.replace with the known value.

How do I do this?

Edit:

Forgot to mention that there can be other parameters in the url. Example:

First click gives

?fss=one 

and the when doing an action that gives the other parameter I mention it gives this:

?param=list&fss=one 

which is correct by using the script from user brijesh chowdary lavu. The param=list is a parameter that always has to be first, and is written to do so and changes from list to largelist, this also works with that script.

Problem is when I click on my specific class a second time - instead of going from

?param=list&fss=one 

to

?param=list&fss=two 

it replaces everything to

?fss=one

Answer 1

Try this.

 $('ul.acfilter li a').on('click', function(e) {
    e.preventDefault();
    if ($(this).attr('href') != "reset") {
        if (location.href.indexOf('?') === -1) {
            location.href = location.href + "?fss=" + $(this).attr('href');
        } else {
            location.href = location.origin + location.pathname + "?fss=" + $(this).attr('href');
        }
    } else {
        location.href = location.origin + location.pathname;
    }
});

Or with simple string methods, you can add a function to your script like below, so that other parameters don't have to change:

$(document).ready(function() {
$('ul.acfilter li a').on('click', function(e) {
    e.preventDefault();
    if ($(this).attr('href') != "reset") {
        if (location.href.indexOf('?') === -1) {
            location.href = location.href + "?fss=" + $(this).attr('href');
        } else {
            location.href = changeParameter(window.location.toString(),"fss",$(this).attr('href'));
        }
    } else {
        location.href = location.origin + location.pathname;
    }
});

});
     function changeParameter(str,par,val)
    {
            var t1 = str.indexOf(par);
            var t3 = t1+par.length+1;
            var t2= str.indexOf("&",t3);
            if(t2==-1)
            {
                return str.substring(0,t3)+val;
            }
            else
            {
                return str.substring(0,t3)+val+str.substring(t2);
            }
    }

Answer 2

You need to track your parameter fss (not the value) and replace the value of it all the time.

The best way to do this is by split from the point of fss.

//Lets split the href by the param fss
var urlParts = location.href.split("fss");

//Insert your new value together with the param. (split removes the param)
if (location.href.indexOf("?") < 0) 
   location.href = urlParts[0] + "?fss=" + $(this).attr('href');
else    
   location.href = urlParts[0] + "fss=" + $(this).attr('href');

And for resetting

location.href = location.href.split("fss")[0];