如何使用jquery更改點擊btn文本

Question

我已經構建了一個基本的btn。我需要一些幫助創建jQuery。

我需要的功能如下。

一旦點擊了「跟隨BTN」按鈕變成綠色和說：以下。

一旦你將鼠標懸停在btn上，它需要打開紅色並且說取消關注。

如果按下按鈕，則會回到灰色，然後說按照。

有人可以幫助嗎？

請更新小提琴。

http://jsfiddle.net/a3LGN/

<a href="#"class="follow-btn"><span>Follow</span></a> 

.follow-btn{ 
    display: block; 
    text-align: center; 
    font: normal 1.6em "Helvetica Neue", helvetica, sans-serif; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    border: none !important; 
    padding: 10px 20px; 
    color: #fff !important; 
    cursor: pointer; 
    font-size: 16px; 
    background:grey 
} 

Answer 1

既然你已經標記jquery希望你不使用jquery頭腦，那麼你可以做這樣的事情

$('#bt1').mouseenter(function(){ 
if($(this).hasClass('follow-btn1')) 
{ 
$(this).css("background-color","red"); 
$('span').text("unfollow"); 
} 
}); 
$('#bt1').mouseleave(function(){ 
$(this).addClass("follow-btn1"); 
$(this).css("background-color","green"); 
$('span').text("following"); 
}); 
$('#bt1').click(function(){ 
$(this).addClass("follow-btn1"); 
$(this).css("background-color","green"); 
$('span').text("following"); 
}); 

工作fiddle

Answer 2

見this fiddle，這算什麼你要？

代碼：

var flag_clicked = false; 

$('a.follow-btn').click(function() { 
    if(flag_clicked) { 
     $(this) 
      .find('span') 
      .text('Follow') 
      .end() 
      .css('backgroundColor','gray'); 
     flag_clicked = false; 
    } else { 
     $(this) 
      .find('span') 
      .text('following') 
      .end() 
      .css('backgroundColor','green'); 

     flag_clicked = true; 
    } 
}).hover(function() { 
    if(flag_clicked) { 
     $(this) 
     .find('span') 
     .text('unfollow') 
     .end() 
     .css('backgroundColor','red'); 
    } 
}, 
    function(){ 
    if(flag_clicked) { 
     $(this) 
     .find('span') 
     .text('following') 
     .end() 
     .css('backgroundColor','green'); 
    }   

     });