在事件处理程序onclick之后，如何正确更改URL的查询字符串中的参数？

Question

我想更改查询字符串中的参数。 我希望有这样的效果：如果我第一次单击，查询字符串会更改，如果我第二次单击，查询字符串将再次更改。 我希望对所有元素都有这种效果，并且必须彼此独立。 在下面的代码中，我没有我想要的。 因为如果我单击第一个元素，它的查询字符串会更改，但现在如果我单击第二个元素没有发生任何事情，我必须单击它两次才能更改其查询字符串。 点击后不要担心刷新页面，因为它将是ajax调用。 我只需要了解如何正确更改参数。 如果要求不明确，我道歉。 谢谢你的帮助。

<a href="quantity-0" onclick="updateParams(this)">CHANGE PARAMETERS<a/><br><br>
<a href="quantity-0" onclick="updateParams(this)">CHANGE PARAMETERS<a/><br><br>
<a href="quantity-0" onclick="updateParams(this)">CHANGE PARAMETERS<a/><br><br>


<script>
 var clicked = true;
 function updateParams(abba){
     if(clicked){
        var a = abba.href.replace('quantity-0', 'add-0');
        abba.setAttribute('href', a);
    }else{
        var a = abba.href.replace('add-0','quantity-0');
        abba.setAttribute('href',a);
  }
     clicked = !clicked;
 }
</script>

Answer 1

尝试这个 -

<script>
    function updateParams(abba){
        if(abba.href.search('quantity-0') > -1) {
            var a = abba.href.replace('quantity-0', 'add-0');
            abba.setAttribute('href', a);
        }
        else {
            var a = abba.href.replace('add-0','quantity-0');
            abba.setAttribute('href',a);
        }
    }
</script>

希望这可以帮助。 谢谢！

Answer 2

您可以使用闭包修复此问题：

<a href="quantity-0" onclick="makeUpdater(this)">CHANGE PARAMETERS<a/><br><br>
<a href="quantity-0" onclick="makeUpdater(this)">CHANGE PARAMETERS<a/><br><br>
<a href="quantity-0" onclick="makeUpdater(this)">CHANGE PARAMETERS<a/><br><br>


<script>
 fucntion makeUpdater(abba) {
   var clicked = true;
   return function updateParams(){
     if(clicked){
        var a = abba.href.replace('quantity-0', 'add-0');
        abba.setAttribute('href', a);
    }else{
        var a = abba.href.replace('add-0','quantity-0');
        abba.setAttribute('href',a);
    }
    clicked = !clicked;
  };
}
</script>

问题是你有一个变量用于所有按钮。 你需要为每一个分开。