我一直在尝试创建一个Twitter关注按钮。我遵循了一些建议,最终结果并不令人满意。上次它正在工作,现在除了我所有的努力之外我不能把它付诸实践。
我认为这会更简单,实际上是一个挑战!
检查下面的代码(HTML,PHP,JS)
HTML
<button class="btn btn-follow cenasparvas" id="<?php echo $profile_data['user_id']; ?>" type="button" onclick="status();"> Follow
JS(实际更新数据库)
<script type="text/javascript">
function status()
{
var this = $('.btn-follow');
var userid = $this.attr("id");
var datastring = 'user_id=' + userid;
if (!this.hasClass('follow')) {
$.ajax({
type: "POST",
url: "follow.php",
data: datastring,
success: function(html)
{
alert('sucess');
}
});
} else if (!this.hasClass('btn-danger')) {
$.ajax({
type: "POST",
url: "unfollow.php",
data: datastring,
success: function(html)
{
alert('sucess aassss');
}
});
}
}
JS(更改显示的按钮类型的脚本 - 支持bootstrap)
<script type="text/javascript">
var btn = $('.btn-follow');
btn.click(h);
btn.hover(hin, hout);
function hin() {
if (btn.hasClass('follow')) {
btn.text('Unfollow');
btn.removeClass('btn-success');
btn.addClass('btn-danger');
} else {
btn.addClass('btn-follow');
}
}
function hout() {
if (btn.hasClass('follow')) {
btn.text('Following');
btn.removeClass('btn-danger');
btn.addClass('btn-success follow');
} else {
btn.removeClass('btn-danger');
}
}
function h() {
if (btn.hasClass('follow')) {
btn.removeClass('btn-success follow');
btn.text('Follow');
btn.removeClass('btn-danger');
} else {
btn.text('Following');
btn.addClass('btn-success follow');
}
}