Jquery 替换 class 只有一种方法

Question

为了一个学校项目，我正在制作一个社交媒体页面，我已经到了必须制作一个 follow/unfollow 按钮的地步。我做了 2 classes。一个看起来像普通按钮的 class (class1) 和一个看起来像按下该按钮的 (class2)。

通常选择 class1，但是当您单击我要显示 class2 的按钮时，它应该显示 "unFollow" 文本。

我希望它能双向工作。因此，当我单击现在 class2 变为 class1 的按钮时，这是我无法修复的问题。

下面是我的代码：

    $(document).ready(function()
{
    $(".FollowB").click(function(){
        $(this).removeClass("FollowButton")
        $(this).addClass("unFollowButton")
        $(this).text("Unfollow")
    }); 
});

if $(this).hasClass("unFollowButton"){
    $(this).removeClass("unFollowButton")
        $(this).addClass("FollowButton")
        $(this).text("Follow")
}

谁能告诉我我的代码有什么问题，更重要的是 为什么它不起作用？

Answer 1

主要问题似乎是第二个 if 在 $(document).ready() 处理程序之外，它的 $(this) 是全局 Window 对象，而不是按钮本身.

验证这一点的最简单方法是在 if.

之前简单地 console.log($(this))

不过，实现功能的最简单方法是：

// I'm assuming the relevant buttons are of class="FollowB"
// *and* they start with a class of either 'follow' or 'unfollow':
$(".FollowB").on('click', function () {
    // $(this) is the clicked .FollowB button-element:
    $(this)
        // toggleClass replaces 'follow' with 'unfollow'
        // and vice-versa; removing the present-class and
        // adding the non-present class:
        .toggleClass('follow unfollow')
        // using the anonymous function of text() to
        // update the text:
        .text(function(){
            // if the clicked element has the class 'follow'
            // we set the text to 'unfollow, if it does not
            // then we set the text to 'follow':
            return $(this).hasClass('follow') ? 'unfollow' : 'follow';
        });
    });

$(".FollowB").on('click', function() {
  $(this)
    .toggleClass('follow unfollow').text(function() {
      return $(this).hasClass('follow') ? 'unfollow' : 'follow';
    });
});

button {
  text-transform: capitalize;
}
.unfollow {
  border: 2px solid #f00;
}
.follow {
  border: 2px solid #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="FollowB unfollow">Follow</button>

参考文献：

Answer 2

 $(".foo").click(function() {
   if ($(this).hasClass('follow')) {
     $(this).removeClass("follow")
     $(this).addClass("unfollow")
     $(this).text("Unfollow")
   } else {
     $(this).removeClass("unfollow")
     $(this).addClass("follow")
     $(this).text("follow")
   }
 });

.follow {
  color: red;
}
.unfollow {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='foo follow'>Follow</div>

Jquery 替换 class 只有一种方法

Jquery replace class only works one way

jquery

class

addclass

removeclass