javascript - “推特喜欢”关注按钮

Question

我想创建一个像 twitter 这样的按钮，我从这段代码中使用：

$(document).ready(function(){
  $('.btn-follow').on('mouseover', function(e){
    if ($(this).hasClass('following')){
      $(this).removeClass('btn-primary').addClass('btn-danger').text('UnFollow');
    }
  })
  $('.btn-follow').on('mouseleave',function(e){
    if ($(this).hasClass('following')){
      $(this).text('Following').removeClass('btn-danger').addClass('btn-primary');
    }
  })
  $('.btn-follow').on('click',function(e){
    $(this).toggleClass('following follow')
    if ($(this).hasClass('follow')){
      alert('unfollow')
      $(this).text('Follow').removeClass('btn-danger')
    }else{
      alert('follow')
      $(this).text('Following')
    }
  })
});

在html中我有这个：

      <button class="btn btn-primary btn-follow following">Following</button>
    <br />
    <br />
  <button class="btn btn-follow follow">Follow</button>

但我认为这是非常脏的代码并且有一些错误。我该如何修复此代码？

Answer 1

好的，主要问题是css 特异性不让btn-danger类生效btn-success。所以作为一个解决方案，我使用了一个我编的空类。跟踪按钮是否被关注。

每当我添加btn-success我添加following类。通过课堂，就像你所做的那样，我能够跟踪按钮的状态。

带引导！！！ http://jsfiddle.net/vjZRA/1/

没有引导程序：http: //jsfiddle.net/vjZRA/

下面的代码：

var btn = $('.btn');
btn.click(h);
btn.hover(hin, hout);

function hin() {
    if (btn.hasClass('follow')) {
        btn.text('Stop Following');
        btn.removeClass('btn-success');
        btn.addClass('btn-danger');
    } else {
        btn.addClass('btn-primary');
    }
}

function hout() {
    if (btn.hasClass('follow')) {
        btn.text('Following');
        btn.removeClass('btn-danger');
        btn.addClass('btn-success follow');
    }
    btn.removeClass('btn-primary');
}

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');

    }
}

然后在样式标签或任何你想要的地方添加css

.follow{}