如何在类中使用带有空格的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选择器?的主要内容,如果未能解决你的问题,请参考以下文章