Question

我在这里的一些优秀开发者的帮助下创建了一个btn。

我需要在其中添加一些其他功能。一旦我有几个相同的btns，一旦点击它们全部改变，问题就出现了，因为我只需要改变一个... 我意识到我可能需要添加一个（this）语句，但不确定在哪里。

真的很感激它帮助这个，

在这里摆弄。请更新，

/*  FOLLOW BTN FUNCTIONS
===================================================================*/
$('#follow-me-btn').mouseenter(function(){
    if($(this).hasClass('follow-btn1'))
    {
    $(this).css("background-color","#de2323");
    $('span.follow').text("unfollow");
    }

});

$('#follow-me-btn').mouseleave(function(){
    if($(this).hasClass('follow-btn1'))
    {
    $(this).addClass("follow-btn1");
    $(this).css("background-color","#3d9223");
    $('span.follow').text("following");
    }

});

$('#follow-me-btn').click(function(){
    if($(this).hasClass('follow-btn1'))
    {
    $(this).removeClass('follow-btn1');
    $(this).addClass('follow-btn');
    $(this).css("background-color","#bdbdbd");
    $('span.follow').text("follow");
    }
    else
    {
    $(this).addClass("follow-btn1");
    $(this).css("background-color","#3d9223");
    $('span.follow').text("following");
    }

});

Answer 1

http://jsfiddle.net/X39QY/4/

您必须仅定位当前按钮下的span.follow。顺便说一句，拥有多个具有相同ID的容器并不是一个好习惯！

/*  FOLLOW BTN FUNCTIONS
===================================================================*/

$('[data-follow-me-btn]').mouseenter(function(){
        if($(this).hasClass('follow-btn1'))
        {
        $(this).css("background-color","#de2323");
        $(this).find('span.follow').text("unfollow");
        }

    });

    $('[data-follow-me-btn]').mouseleave(function(){
        if($(this).hasClass('follow-btn1'))
        {
        $(this).addClass("follow-btn1");
        $(this).css("background-color","#3d9223");
        $(this).find('span.follow').text("following");
        }

    });

    $('[data-follow-me-btn]').click(function(){
        if($(this).hasClass('follow-btn1'))
        {
        $(this).removeClass('follow-btn1');
        $(this).addClass('follow-btn');
        $(this).css("background-color","#bdbdbd");
        $(this).find('span.follow').text("follow");
        }
        else
        {
        $(this).addClass("follow-btn1");
        $(this).css("background-color","#3d9223");
        $(this).find('span.follow').text("following");
        }

    });

Answer 2

所有事件处理程序都使用$（'span.follow'）选择器，它会影响HTML中的所有span.follow元素。您需要在所有这些之前添加$（this），以便它只能更新所选元素的文本。此外，在HTML中，您不能为每个元素分配相同的ID。 ID必须是唯一的。这是你的HTML：

<li><a href="#" class="follow-me-btn follow-btn following charts"><span class="follow">Follow</span></a></li>

<li><a href="#" class="follow-me-btn follow-btn following charts"><span class="follow">Follow</span></a></li>

<li><a href="#" class="follow-me-btn follow-btn following charts"><span class="follow">Follow</span></a></li>

<li><a href="#" class=" follow-me-btn follow-btn following charts"><span class="follow">Follow</span></a></li>

这是js代码：

$('.follow-me-btn').mouseenter(function(){
    if($(this).hasClass('follow-btn1'))
    {
    $(this).css("background-color","#de2323");
    $(this).find('span').text("unfollow");
    }

});

$('.follow-me-btn').mouseleave(function(){
    if($(this).hasClass('follow-btn1'))
    {
    $(this).addClass("follow-btn1");
    $(this).css("background-color","#3d9223");
    $(this).find('span').text("following");
    }

});

$('.follow-me-btn').click(function(){
    if($(this).hasClass('follow-btn1'))
    {
    $(this).removeClass('follow-btn1');
    $(this).addClass('follow-btn');
    $(this).css("background-color","#bdbdbd");
    $(this).find('span').text("follow");
    }
    else
    {
    $(this).addClass("follow-btn1");
    $(this).css("background-color","#3d9223");
    $(this).find('span').text("following");
    }

});

这是更新的小提琴：http://jsfiddle.net/X39QY/7/

Answer 3

第一步：将所有按钮名称更改为class="follow-me-btn"

代码如下所示：

<a href="#" class="follow-me-btn follow-btn following charts">

您还需要稍微更改代码的其余部分，再次对整个组（“follow”类中的所有元素）执行操作，而不是在一个特定的span元素上执行操作。因此，在更改$(this)的背景颜色后，您必须找到下一个'span'标记（或'span.follow'，如果您希望超级特定）并更改该特定范围标记中的文本

$('.follow-me-btn').mouseenter(function(){
    if($(this).hasClass('follow-btn1')){
        $(this).css("background-color","red");
        $(this).find('span.follow').text("unfollow");
    }
});

$('.follow-me-btn').mouseleave(function(){
    if($(this).hasClass('follow-btn1')){
        $(this).addClass("follow-btn1");
        $(this).css("background-color","green");
        $(this).find('span').text("following");
    }
});

$('.follow-me-btn').click(function(){
    if($(this).hasClass('follow-btn1')){
        $(this).removeClass('follow-btn1');
        $(this).addClass('follow-btn');
        $(this).css("background-color","grey");
        $(this).find('span').text("Follow");
    }else{
        $(this).addClass("follow-btn1");
        $(this).css("background-color","#green");
        $(this).find('span').text("following");
    }
});

jsFiddle demo

如何让jquery成为一个类？

3 个答案: