Question

我的HTML代码如下：

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

我想在此类的所有跨度上将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方法。

您正在寻找将this和.removeClass()链接到 jQuery包装器 {strong> .addClass()，而不是定位DOM对象$(this)：< / p>

$("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()函数将类更改为所需的类，而不是删除和添加类，如下所示

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

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

2 个答案: