如何使用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'); 
    }   

     });