Изменить href, когда пользователь нажимает на ссылку

Question

ОК. Итак, я пытаюсь добавить идентификатор к примеру ссылки:

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

когда они нажимают на одну из ссылок, следует добавить идентификатор, подобный этому, если они нажимают «горелка один»:

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

мы сохраняем измененные ссылки в массиве ChangeArr, а когда щелкаем на кнопке back (вызвано, потому что она отправляет 'back' в качестве второго аргумента), мы выполняем цикл for в changeArr и удаляемвсе, что следует за последним вхождением & .... (что всегда в этой ситуации id id)

Рабочий пример можно посмотреть здесь, http://jsfiddle.net/H2YHw/

Answer 2

Позволяет использовать функцию 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);
        }
    }
}

Answer 3

Я делал нечто подобное в прошлом.Это было в PHP, но идея очень похожа.Я использую его довольно часто, особенно когда дело касается номеров страниц, когда я добавляю &p=3 для ссылки на конкретную страницу.Я просто храню его в своей утилите.Во всяком случае, так я и решил.

1. Вам необходимо проверить, имеет ли ваш URL-адрес уже id параметр.
2. Если это так, измените его, если он просто не добавляет его.

Для фильтрации параметров вы можете написать метод, который будет принимать две строки: одну с параметром id и одну со значением .Для получения второй части (параметров) URL-адреса необходимо выполнить следующие действия:

1. split http://google.com/stats.php?go=superhigh&id=333231 через символ ? .
2. split вторая часть URL - array[1] от & - это даст вам массив всех параметров с их значениями.Примечание: проверьте, есть ли оно в нем, а если нет, то перейдите к шагу 3.
3. Для цикла по каждому из них и split это по = - array[0] равноваш параметр и array[1] это значение.Если ваш параметр соответствует требуемому параметру, обновите его с новым значением и остановитеЕсли это не так, добавьте новый набор параметров / значений в конец URL.

Надеюсь, это имеет смысл.

Ссылка: http://www.quirksmode.org/js/strings.html#split