更改内容、类，然后在按钮单击问题上发送 Ajax 请求答案

【问题标题】：Change content, class and then send Ajax request on Button click issue更改内容、类，然后在按钮单击问题上发送 Ajax 请求
【发布时间】：2014-01-14 19:54:57
【问题描述】：

我有一个样式为按钮的超链接，可让他们与网站上的特定人员加好友或取消加好友。但是，我需要在单击时更改超链接的类和内容，以及发送 Ajax 请求以运行 PHP 脚本以使用 2 个 id 添加或删除好友（一个是 $user->data()->id 和另一个是$timeline->data()->id)，它是使用 PHP 完成的。

a) 我正在尝试使用以下代码更改超链接的内容：

function al(){
var friend = document.getElementById('friend');
friend.innerHTML = 'hi';
}

<a href="#" id="friend" class="unfriend" onclick="al();">Unfriend</a>

b) 关于如何完成其余部分的任何建议？我可以使用 Javascripts .className 函数更改类吗？

jsfiddle：fiddle

我也尝试过使用：

$('#friend').onclick(function(){
var friend = document.getElementById('friend');
fiend.innerHTML = 'hi';
});

提前致谢！

【问题讨论】：

您可以轻松地使用 Jquery。
那怎么办？我是 Javascript 新手
friend.className = 'new_class' 仅用该类替换当前类。

标签： javascript php jquery html hyperlink

【解决方案1】：

要将数据发送到服务器，您可以使用 Jquery.ajax 来发布数据。见http://api.jquery.com/jQuery.ajax/

测试元素是否属于某个类

试试

if ($("#friend").hasClass("unfriend")) { ....}

要更改类也可以使用 Jquery 来

$("#friend").on ('click', function () {
    $("#friend").removeClass("unfriend").addClass("friend");
});

或

$("#friend").attr( "class", "friend" );   // replace only

简单地设置文本

$("#friend").text ("Hi");

所以简单的解决方案是使用 Jquery 并做

$("#friend").on ('click', function () {
    $("#friend").attr( "class", "friend" );
    $("#friend").text ("Hi");
});

【讨论】：

【解决方案2】：

考虑到您的问题，您可以这样做：

HTML：

<a href="#" id="friend" class="unfriend" onclick="callAjax();">Unfriend</a>

JS：

$("#friend").click(function () {
    document.getElementById('friend').innerHTML = 'hi';
    $("#friend").removeClass("unfriend").addClass("friend");
});

function callAjax() {
    $.ajax({
        url: "/your_URL",
        context: document.body
    }).done(function () {
        $(this).addClass("done");
    });
}

提琴供参考：http://jsfiddle.net/bm7Er/2/

【讨论】：