«Twitter, как» кнопку следуют

Question

Я хочу, чтобы создать как кнопки, как щебет, я использовал из этого кода:

$(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{}