Question

我在使用jquery动态更改此链接的ID时遇到了困难。我可以更改链接文本，但不能更改ID。有什么想法吗？

<a href="#" id="follow-5">follow</a>

当你点击链接时，我希望它看起来像：

<a href="#" id="following-5">following</a>

这是我的jquery代码

$("a[id^='follow']").live('click', function(e) {
    e.preventDefault();
    var aid = $(this).attr('id').substring(7);
    $.ajax({
        type: "POST", url: "/artist/", data: "command=becomeFan&aid=" + aid,
        dataType: "html",
        success: function(data){
            $("#follow-" + aid).text("Following");
            $("#follow-" + aid).prev("a").attr("id","following-" + aid);
        }
    });
    return false;
});

Answer 1

问题是你的代码不会尝试更改那个元素的id，它会尝试更改.prev()元素的id。所以改变：

$("#follow-" + aid).prev("a").attr("id","following-" + aid);

为：

$("#follow-" + aid).attr("id","following-" + aid);

它应该有效。但是，如果你已经选择了相同的元素，那么你应该只是链接.attr调用：

        $("#follow-" + aid).text("Following")
                           .attr("id","following-" + aid);

或者不是通过id重新选择元素，在进行Ajax调用之前保存对它的引用：

$("a[id^='follow']").live('click', function(e) {
    e.preventDefault();
    var $this = $(this),
        aid = $this.attr('id').substring(7);
    $.ajax({
        type: "POST", url: "/artist/", data: "command=becomeFan&aid=" + aid,
        dataType: "html",
        success: function(data){
            $this.text("Following").attr("id","following-" + aid);
        }
    });
    return false;
});

另请注意，您对$("a[id^='follow']")的选择器使用属性的选择将继续选择这些元素，即使他们的ID已更改，但使用.substring(7)从最后获取ID将工作。您可能希望将其更改为$("a[id^='follow-']")，以便点击处理程序仅适用于尚未点击的链接。

更改链接的ID

1 个答案: