jQuery .click() 事件不起作用。两个中的一个正在工作，另一个没有[重复]答案

【问题标题】：jQuery .click() event not working. Out of two one is working the other does not [duplicate]jQuery .click() 事件不起作用。两个中的一个正在工作，另一个没有[重复]
【发布时间】：2020-12-19 11:14:32
【问题描述】：

$('.like-btn').click((e) => {
  e.target.classList = 'like-unlike-btn unlike-btn far fa-heart';
});

$('.unlike-btn').click((e) => {
  e.target.classList = 'like-unlike-btn like-btn far fa-heart';
});

.like-unlike-btn {
  color: #fb3958;
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 10px;
  cursor: pointer;
}

.like-unlike-btn:hover {
  color: rgb(252, 11, 11);
}

.unlike-btn {
  font-weight: bold;
}

.like-btn {
  font-weight: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<i class="like-unlike-btn like-btn far fa-heart"></i>

为什么我的代码不起作用？第一个点击事件工作正常，但第二个不工作请提出其他一些方法。

【问题讨论】：

RTM vanilla 或 RTM jQuery
我的问题是关于为什么我的问题被关闭的事件
在like-btn distinct-btn上使用toggleClass

标签： javascript html jquery css jquery-click-event

【解决方案1】：

您可以将事件附加到主类like-unlike-btn 并改用toggleClass：

$('.like-unlike-btn').on('click', function(e) {
  $(this).toggleClass('unlike-btn like-btn');
});

.like-unlike-btn {
  color: gray;
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 10px;
  cursor: pointer;
}

.like-unlike-btn:hover {
  color: red !important;
}

.like-btn {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<i class="like-unlike-btn like-btn far fa-heart"></i>

【讨论】：

有效，仅在离开心脏时可见