如何在 class 中使用带空格的 jquery 选择器？

Question

我有下面的 Html 代码：

<span class="fa fa-heart-o"></span>

我想通过此 class

在悬停时将 class="fa fa-heart-o" 切换为 class="fa fa-heart"

$("span").filter(".fa.fa-heart-o").hover(function () {
  alert("hola");
  this.removeClass('fa fa-heart-o');
  this.addClass('fa fa-heart');
}, function () {
  alert("adios");
  this.removeClass('fa fa-heart');
  this.addClass('fa fa-heart-o');
  });

});

我尝试了很多方法，但没有任何效果。

Answer 1

问题是您试图在 DOM 对象上调用 jQuery 方法。

您希望将 .removeClass() 和 .addClass() 链接到 jQuery，而不是针对 DOM 对象 this包装器 $(this):

$("span").filter(".fa.fa-heart-o").hover(function() {
  //alert("hola");
  $(this).removeClass('fa fa-heart-o');
  $(this).addClass('fa fa-heart');
}, function() {
  //alert("adios");
  $(this).removeClass('fa fa-heart');
  $(this).addClass('fa fa-heart-o');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="fa fa-heart-o"></span>

Answer 2

我们可以简单地使用 jQuery 的 attr() 函数将 class 更改为所需的 class，而不是删除和添加 class，如下所示

$("span").filter(".fa.fa-heart-o").hover(function() {
  $(this).attr('class', 'fa fa-heart');
}, function() {
  $(this).attr('class', 'fa fa-heart-o');
});

如何在 class 中使用带空格的 jquery 选择器？

How to use jquery selector in class with white spaces?

jquery

jquery-selectors

bootstrap-4