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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在类中使用带有空格的jquery选择器?相关的知识,希望对你有一定的参考价值。

我有以下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');
  });

});

我尝试过很多方面,但没有任何效果。

答案

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

而不是目标DOM对象this,你想要将.removeClass().addClass()链接到jQuery包装器$(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>
另一答案

我们可以简单地使用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选择器?的主要内容,如果未能解决你的问题,请参考以下文章

如何在类中定义装饰器?

使用带有 jquery 选择器的变量

如何在类中使用 Pyomo 装饰器

带有变量的 jQuery 选择器

如何在类中声明装饰器,以装饰已经装饰的继承方法?

jQuery类选择器在类更改后不选择