用戶單擊鏈接時更改href

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>

當他們點擊其中一個鏈接時，如果他們點擊“ burner one”，則應添加一個類似於此示例的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>

以上代碼的說明。 我們在changeIt類中創建一個新對象“ changer（）”，我們傳遞了兩個參數-第一個是要編輯其id的鏈接的id，第二個是值的/ id數據。

我們將更改后的鏈接保存到一個名為changedArr的數組中，並單擊back（觸發它是因為將“ back”作為第二個參數發送”觸發），我們在changedArr中進行了for循環，並刪除了最后一次出現后的所有內容＆....（在這種情況下始終為id arg）

您可以在這里看到一個有效的示例， http：//jsfiddle.net/H2YHw/

Answer 2

我過去做過類似的事情。 它是用PHP編寫的，但是思想基本相同。 我經常使用它，尤其是在處理頁碼時，當我添加&p=3鏈接到特定頁面時。 我只是將其保存在我的工具箱中。 無論如何，這就是我的解決方法。

1. 您需要檢查您的網址是否已經有id參數。
2. 如果確實要更改它，如果不簡單地添加一個。

要過濾參數，您可以編寫一個方法，該方法將使用兩個字符串，一個帶有參數id ，一個帶有值 。 它必須執行以下操作。

1. 通過？ split http://google.com/stats.php?go=superhigh&id=333231 字符以獲取網址的第二部分（參數）。
2. split的url第二部分- array[1]由與 -這會給你的所有參數的陣列與它們的值。 注意：檢查其中是否包含＆，如果沒有，則轉到步驟3。
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);
        }
    }
}