Javascript 当用户单击链接时更改href

好的，我正在尝试向链接添加id示例：

<a href="http://google.com/stats.php?go=normal">normal</a>  
<a href="http://google.com/stats.php?go=normalmedium">normal medium</a> 
<a href="http://google.com/stats.php?go=normalmediumhigh">normal medium high</a> 
<a href="http://google.com/stats.php?go=normalhigh">normal high</a> 
<a href="http://google.com/stats.php?go=superhigh">super high</a>

默认情况下，链接如下所示，但如果单击按钮或链接如下：

<a href="#" onclick="changeIt('bnone9099');>burner one</a> 
<a href="#" onclick="changeIt('bnone9034');>burner two</a> 
<a href="#" onclick="changeIt('bnone9098');>burner three</a>

当他们单击其中一个链接时，如果他们单击“燃烧器一号”，则应添加一个类似于此示例的id：

等等，如果他们点击

<a href="#" onclick="changeIt('back');>default</a>

它应该像这样将链接更改回正常状态

<a href="http://google.com/stats.php?go=normal">normal</a>  
<a href="http://google.com/stats.php?go=normalmedium">normal medium</a> 
<a href="http://google.com/stats.php?go=normalmediumhigh">normal medium high</a> 
<a href="http://google.com/stats.php?go=normalhigh">normal high</a> 
<a href="http://google.com/stats.php?go=superhigh">super high</a>

---

我希望这个例子不要太复杂！谢谢：）

我过去也做过类似的事情。 它是用PHP编写的，但是想法非常相似。我经常使用它，尤其是在处理页码时，当我添加

&p=3

链接到特定页面时。我只是把它放在我的工具箱里。不管怎样，我就是这样解决的

您需要检查您的url是否已经有id参数

如果它做了，那么就改变它，如果它不是简单地添加一个

要过滤参数，您可以编写一个方法，该方法将采用两个字符串，一个带有参数id，另一个带有值。它必须做到以下几点

拆分

http://google.com/stats.php?go=superhigh&id=333231

通过？字符获取url的第二部分（参数）

split

url的第二部分-

数组[1]

由和分割-这将为您提供一个包含所有参数及其值的数组。注意：检查它是否包含&如果没有，则转到步骤3

For循环遍历它们中的每一个，并通过=-

数组[0]

将其拆分，这是您的参数，

数组[1]

是值。如果您的参数与所需的参数匹配，请使用新值更新它并断开。如果没有，则在url末尾添加一组新的参数/值

我希望这是有道理的

参考：

---

我过去也做过类似的事情。 它是用PHP编写的，但是想法非常相似。我经常使用它，尤其是在处理页码时，当我添加

&p=3

链接到特定页面时。我只是把它放在我的工具箱里。不管怎样，我就是这样解决的

您需要检查您的url是否已经有id参数

如果它做了，那么就改变它，如果它不是简单地添加一个

要过滤参数，您可以编写一个方法，该方法将采用两个字符串，一个带有参数id，另一个带有值。它必须做到以下几点

拆分

http://google.com/stats.php?go=superhigh&id=333231

通过？字符获取url的第二部分（参数）

split

url的第二部分-

数组[1]

由和分割-这将为您提供一个包含所有参数及其值的数组。注意：检查它是否包含&如果没有，则转到步骤3

For循环遍历它们中的每一个，并通过=-

数组[0]

将其拆分，这是您的参数，

数组[1]

是值。如果您的参数与所需的参数匹配，请使用新值更新它并断开。如果没有，则在url末尾添加一组新的参数/值

我希望这是有道理的

参考：

功能转换器（）{
var changedar=[]；
this.changeIt=函数（$this，str）{
如果（str！=“back”）{
$this=document.getElementById（$this）；
$this.href=$this.href+“&id=“+str；
变革推动（$this）；
}否则{
对于（变量i=0，len=changedar.length；i
函数转换器（）{
var changedar=[]；
this.changeIt=函数（$this，str）{
如果（str！=“back”）{
$this=document.getElementById（$this）；
$this.href=$this.href+“&id=“+str；
变革推动（$this）；
}否则{
对于（var i=0，len=changedar.length；i让我们使用jquery的.data（）函数

让我们利用jquery的.data（）函数

谢谢你，这正是我想要的。谢谢你花时间编写这个。你好，你也可以试试这个。我想我在上面发布的代码上犯了一个错误，但是这个链接可以100%正常工作；）我真的没有看到java添加子id的？NVM这是我的一个错误，再次感谢它现在工作得很好！：）谢谢你正是我想要的感谢你花时间编写这个！：）你好，你也可以试试这个，我想我在上面发布的代码上犯了一个错误，但是这个链接可以100%正常工作；）我不知道看到java添加子id的NVM了吗？这是我的一个错误，再次感谢，现在它工作得很好！）
<a href="http://google.com/stats.php?go=normal">normal</a>  
<a href="http://google.com/stats.php?go=normalmedium">normal medium</a> 
<a href="http://google.com/stats.php?go=normalmediumhigh">normal medium high</a> 
<a href="http://google.com/stats.php?go=normalhigh">normal high</a> 
<a href="http://google.com/stats.php?go=superhigh">super high</a>

function changer(){
   var changedArr = [];
   this.changeIt = function($this, str ){

     if(str!="back"){
         $this = document.getElementById($this);
         $this.href = $this.href+"&id="+str;
         changedArr.push( $this );
     }else{
         for( var i=0, len=changedArr.length;i<len;i++){
           var lastInd = changedArr[i].href.lastIndexOf("&");
           changedArr[i].href = changedArr[i].href.substr(0,lastInd);
         }
     }
  };

}

var chHandler = new changer();

<a id="link1" href="http://google.com/stats.php?go=normal">normal</a>  
<a id="link2" href="http://google.com/stats.php?go=normalmedium">normal medium</a> 
<a id="link3" href="http://google.com/stats.php?go=normalmediumhigh">normal medium high</a> 
<a id="link4" href="http://google.com/stats.php?go=normalhigh">normal high</a> 
<a id="link5" href="http://google.com/stats.php?go=superhigh">super high</a>

<a href="#" onclick="chHandler.changeIt('link1','bnone9099');">burner one</a> 
<a href="#" onclick="chHandler.changeIt('link2','bnone9034');">burner two</a> 
<a href="#" onclick="chHandler.changeIt('link3','bnone9098');">burner three</a>

<a href="#" onclick="chHandler.changeIt('dummy','back');">BACK</a>

function changeIt(arg){
    // I highly recommend you add something to control the target 'a' tags
    // 'the_link_undercontrol' is merely my assumption
    $('a.the_link_undercontrol').each(function(){
        var $t = $(this);
        if(arg == 'back'){
            if($t.data('originalLnk')){
                $t.attr('href', $t.data('originalLnk'))
            }
        } else {
            var href = $t.attr('href');
            if(href.indexOf('?') != -1){
                // you need to check if 'id' is the only parameter!!
                // and for best practice, get your param properly encoded
                $t.attr('href', href + '?id=' + encodeURIComponent(arg);
            } else {
                $t.attr('href', href + '&id=' + encodeURIComponent(arg);
            }
            $t.data('orginalLnk', href);
        }
    }
}