Question

我已经建立了一个基本的btn。我需要一些帮助来创建jquery。

我需要的功能如下。

点击＆＃34;点击btn＆＃34; 按钮变为绿色，然后说跟随。

一旦你将鼠标悬停在btn之上，它需要转为红色并说取消关注。

如果然后按下该按钮，则会变回灰色并说出来。

任何人都可以帮忙吗？

请更新小提琴。

<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

请参阅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');
    }         

         });

Answer 2

由于您已标记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

如何使用jquery更改btn文本

2 个答案: