「推特喜歡」跟隨按鈕

我想創建像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>

，但我認爲它代碼非常髒，並且有一些錯誤。我該如何解決這個問題？

來源

2013-08-07 Clear

你有什麼錯誤> ？ – imulsion

當我點擊第二個按鈕時，懸停不起作用。我如何重新綁定一個函數？ – Clear

是''按鈕'一個'一次？如果是這樣，你替換了開始標籤，但你忘記了替換結束標籤... –

確定的主要問題是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{}

來源

2013-08-07 13:04:07

我沒有做鏈接以保持清晰。我認爲所有的改進都應該在你有了概念和方法後才能完成。 –

code really minified：'var _ = $（「。btn」）; _。click（function（）{_。hasClass（「f」）？_。removeClass（「btn-success f」）.text（「Follow 「）.removeClass（」btn-danger「）：_。text（」following「）。addClass（」btn-success f「）}）; _。hover（function（）{_。hasClass（」f「）？ _.text（「Stop Following」）。removeClass（「btn-success」）。addClass（「btn-danger」）：_。addClass（「btn-primary」）}，function（）{_。hasClass（「f 「）？_。text（」following「）。removeClass（」btn-danger「）。addClass（」btn-success f「）：_。removeClass（」btn-primary「）}）; ' –

「推特喜歡」跟隨按鈕

回答

相關問題