Изменение значения href с JavaScript

Question

У меня есть этот пример в JsFiddle.

http://jsfiddle.net/PtNfD/114/

<a href="http://www.yahoo.com" target="_blank" id="changeMe">Yahoo</a> 
<a href="http://www.yahoo.com" target="_blank" id="changeMe">Not working</a> 

$(document).ready (function() { 


    $('#changeMe'). click (function (e) { 
     var goLucky = Math.floor(Math.random()*12); 
     if (goLucky % 2 == 0) { 
      this.href = "http://www.google.com"; 
     } else { 
      this.href = "http://www.hotmail.com"; 
     } 
    }); 
}); 

HREF изменение работы в первом звене, но не во втором. Как я могу заставить его работать для обеих ссылок?

Число ссылок на моей странице является динамическим, потому что я создаю ссылки с PHP, поэтому мне нужно, чтобы изменения href работали во всех сгенерированных ссылках.

Answer 1

id атрибуты должны быть уникальными. Вы должны преобразовать значение changeMe в имя класса для использования на нескольких элементах. Тогда ваш существующий код должен работать:

<a href="http://www.yahoo.com" target="_blank" class="changeMe">Yahoo</a> 
<a href="http://www.yahoo.com" target="_blank" class="changeMe">Not working</a> 

$(document).ready (function() { 


    $('.changeMe'). click (function (e) { 
     var goLucky = Math.floor(Math.random()*12); 
     if (goLucky % 2 == 0) { 
      this.href = "http://www.google.com"; 
     } else { 
      this.href = "http://www.hotmail.com"; 
     } 
    }); 
}); 

При желании можно добавить уникальный id ко второму тега привязки и изменить код JavaScript соответственно.

Answer 2

Вы не можете использовать идентификатор на двух разных элементах в HTML. Вам необходимо присвоить каждому из них другой идентификатор или один и тот же класс, а затем применить изменения href для каждого из идентификаторов, или класс

Answer 3

Идентификаторы должны использоваться один раз на веб-страницу. Занятия можно использовать более обильно. Помните свою специфику. Использовать класс вместо id: http://jsfiddle.net/PtNfD/115/

<a href="http://www.yahoo.com" target="_blank" class="changeMe">Yahoo</a> 
<a href="http://www.yahoo.com" target="_blank" class="changeMe">Not working</a> 

$(document).ready (function() { 


    $('.changeMe'). click (function (e) { 
     var goLucky = Math.floor(Math.random()*12); 
     if (goLucky % 2 == 0) { 
      this.href = "http://www.google.com"; 
     } else { 
      this.href = "http://www.hotmail.com"; 
     } 
    }); 
});