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课程。通过课堂，你可以跟踪按钮的状态。

使用bootstrap !!! 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{}

“Twitter喜欢”按钮

1 个答案: