Question

我有一个超链接样式的按钮，这将导致他们在网站上为特定的人提供朋友或不友好。但是，我需要在单击时更改类和超链接的内容，以及发送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';
});

提前致谢！

Answer 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");
});

Answer 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/

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

2 个答案: