从JavaScript更改href值

时间:2015-05-12 20:07:35

标签: javascript

我在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更改才能在所有生成的链接中工作。

3 个答案:

答案 0 :(得分:8)

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代码。

答案 1 :(得分:1)

您不能在HTML中的两个不同元素上使用ID。您需要将每个不同的ID或同一个类别对齐,然后对每个ID或类应用href更改

答案 2 :(得分:0)

每个网页应使用一次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";
        }
    });
});