像按钮一样创建twitter

时间:2014-01-21 16:59:12

标签: javascript php jquery

我一直在尝试创建一个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');

    }
}

0 个答案:

没有答案