Question

好的所以我试图在链接示例中添加一个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>

当他们点击其中一个链接时，如果他们点击“刻录机1”，它应该像这个例子一样添加一个id：

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

依此类推，如果他们点击

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

我希望这个例子不是太复杂！谢谢:)）

Answer 1

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();

和html ...

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

上述代码的说明。我们正在创建一个“changer（）”的新对象，在changeIt类中，我们传递两个参数 - 第一个是要编辑id的链接的id，第二个是值的/ id的数据。

我们将更改后的链接保存到名为changedArr的数组中，当单击back时（触发因为它将'back'作为第二个参数），我们在changedArr中执行for循环，并删除后面的所有内容＆amp; ....的最后一次出现（在这种情况下始终是id arg）

你可以在这里看到一个有效的例子， http://jsfiddle.net/H2YHw/

Answer 2

我过去做过类似的事情。它是在PHP中，但这个想法非常相似。我经常使用它，尤其是在处理页码时，当我添加&p=3链接到特定页面时。我把它放在我的实用工具箱里。无论如何，这就是我解决它的方式。

您需要检查您的网址是否已经 id 参数。
如果确实如此，则更改它，如果它不是简单地添加一个。

要过滤参数，您可以编写一个方法，该方法将使用参数 id 的两个字符串和一个值的字符串。它必须做到以下。

split http://google.com/stats.php?go=superhigh&id=333231通过？字符获取网址的第二部分（参数）。
split网址的第二部分 - array[1] ＆amp; - 这将为您提供包含其值的所有参数的数组。注意：检查它是否包含＆amp;如果没有，则转到第3步。
循环浏览每一个，split通过 = - array[0]是您的参数，array[1]是值。如果您的参数与所需参数匹配，请使用新值更新并中断。如果没有，则在网址的末尾添加一组新的参数/值。

我希望这是有道理的。

参考： http://www.quirksmode.org/js/strings.html#split

Answer 3

让我们使用jquery .data（）函数

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);
        }
    }
}

用户单击链接时更改href

3 个答案: