Javascript 如何使jquery目标成为一个类？

我已经创建了一个btn的帮助下，一些伟大的开发人员在这里

不过，我需要在其中添加一些其他功能。问题发生在我有几个相同的BTN，单击后它们都会更改，因为我只需要更改一个。。 我意识到我可能需要在中添加（此）声明，但不确定在何处

如果能帮上忙我会很感激的

在这里拉小提琴。请更新

---

所有事件处理程序都使用$（'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>

---

下面是更新的提琴：

第一步：将所有按钮名称更改为

class=“follow me btn”

代码如下所示：

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

必须仅针对当前按钮下的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");
        }

    });

---

您的所有事件处理程序仍在使用该ID，并且只找到第一个元素，因为ID是唯一的。您对多个按钮使用相同的ID。Id必须是唯一的。您不需要使用javascript来更改鼠标输入和鼠标离开时的背景色。CSS做得更好链接：已访问：悬停和：活动允许您控制此。看见

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

$('.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");
    }
});

/*  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");
        }

    });