Question

我正在尝试activate/deactivate用户点击锚点。用户列表是从循环动态生成的。以下是锚标记的一个示例。

<a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactivate">Activated</a>

ajax call/database updates/response工作正常。我想要的是通过更新href, class, title and text成功更改上面的锚点。例如，它现在应该更改为

<a href="http://www.example.com/users/activate/44" class="btn btn-danger" title="Activate">Inactive</a>

我有以下jquery代码：

$(".btn").click(function(event){
    event.preventDefault();
    var urlSplit=$(this).attr("href").split("/");
    var userid = urlSplit[urlSplit.length-1];
    var status = urlSplit[urlSplit.length-2];
    var $self = $(this); 

    if(status === 'activate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'activated'){
                //Edit added code
                $self.text("Activated");
                $self.attr('href', "http://www.example.com/users/deactivate/"+userid);
                $self.attr('class', "btn btn-success");
                $self.attr('title', "Deactivate");
            }
        });

    }

    if(status === 'deactivate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'deactivated'){
                //Edit added code
                $self.text("Inactive");
                $self.attr('href', "http://www.example.com/users/activate/"+userid);
                $self.attr('class', "btn btn-danger");
                $self.attr('title', "Activate");
            }
        });

    }

});

修改

我已在成功回复中添加了代码。虽然看起来工作正常，但对我来说看起来并不是正确的方式，不是吗？我必须将光标移开并再次聚焦以查看href和title中的更改。

Answer 1

看起来非常直截了当，除非我误解了这个问题。使用字符串替换和attr更改属性。使用removeClass和addClass更改课程。 $self已经指向导致该事件的特定链接。

$(".btn").click(function(event){
    event.preventDefault();
    var urlSplit=$(this).attr("href").split("/");
    var userid = urlSplit[urlSplit.length-1];
    var status = urlSplit[urlSplit.length-2];
    var $self = $(this); 

    if(status === 'activate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'activated'){
                $self.text("Activated");
                // what to do here
                $self.attr('href', $self.attr('href').replace('activate', 'deactivate'));
                $self.removeClass('btn-danger').addClass('btn-success');
                $self.attr('title', 'Activate');
            }
        });

    }

    if(status === 'deactivate'){
        $.post("users/" + status + "/" + userid, {userid: userid, status: status}, function(response){
            if(response === 'deactivated'){
                //what to do here
                $self.text("Inactive");
                $self.attr('href', $self.attr('href').replace('deactivate', 'activate'));
                $self.removeClass('btn-success').addClass('btn-danger');
                $self.attr('title', 'Deactivate');
            }
        });

    }
});

简单模型：http://jsfiddle.net/TrueBlueAussie/9gLta/2/

我敲掉了Ajax调用来测试它。

更新：请注意，在发布此问题代码后，问题代码已更改为包含此代码的大部分内容。

用ajax替换锚点

1 个答案:

简单模型：http://jsfiddle.net/TrueBlueAussie/9gLta/2/