从JavaScript更改href值

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中的两个不同元素上使用ID。 您需要将每个不同的ID或同一个类别对齐，然后对每个ID或类应用href更改

Answer 3

每个网页应使用一次ID。 可以更充分地使用类。 记住你的特异性。 使用class而不是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";
        }
    });
});