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