How to use jquery selector in class with white spaces?

I have the Html code below:

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


I want to change from class="fa fa-heart-o" to class="fa fa-heart-o" in all span with this class

$("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');
);


});

I've tried in many ways nothing works.

1 Answer
1

The problem is that you're trying to call jQuery methods on a DOM object.

Instead of targetting the DOM object this, you're looking to chain .removeClass() and .addClass() to the jQuery wrapper $(this):

this

.removeClass()

.addClass()

$(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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.