Reputation: 5975
Assume I have the following css:
<style>
.liked {
color: #600;
}
.not-liked {
color: #aaa;
}
</style>
Assuming I have this: <i class = 'fa fa-heart-o not-liked' id = "banner"></i>
in my jQuery, if I swap classes from not-liked
to liked
can I also swap fa-heart-o to fa-heart in the same class?
So I'm trying to avoid this:
function() {
$("#banner").removeClass('not-liked');
$("#banner").removeClass('fa-heart-o');
$("#banner").addClass('liked');
$("#banner").addClass('fa-heart');
}
and basically switch the colour and the icon with this:
function() {
$("#banner").removeClass('not-liked');
$("#banner").addClass('liked');
}
Upvotes: 1
Views: 1537
Reputation: 1316
try with this below code and you can continue to remove and add classes using jquery
$( "i#banner" ).click(function() {
$(this).toggleClass( "fa-heart-o not-liked fa-heart liked" );
});
.liked {
color: #600;
}
.not-liked {
color: #aaa;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<i class = 'fa fa-heart-o not-liked' id="banner"></i>
<i class = 'fa fa-heart-o not-liked' id="banner"></i>
<i class = 'fa fa-heart-o not-liked' id="banner"></i>
Upvotes: 2
Reputation: 54676
I highly recommend reading Decoupling Your HTML, CSS, and JavaScript - Philip Walton @ Google.
IMO, your code is to tightly coupled. Instead of tying everything together, take advantage of css as much as possible:
$(document).ready(function(){
$(".js-update-heart").on("click", function(){
$(this).toggleClass('is-liked is-not-liked');
});
});
.banner .fa{
display: none;
cursor: pointer;
}
.banner .fa-heart-o {
color: #600;
}
.banner .fa-heart {
color: #aaa;
}
.banner.is-liked .fa-heart{
display: inline;
}
.banner.is-not-liked .fa-heart-o{
display: inline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="banner is-liked js-update-heart">
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart"></i>
</span>
In this example, the CSS reads nicely, and the jQuery is extremely small.
Upvotes: 1
Reputation: 26385
FontAwesome glyphicons can be accessed via their Unicode identifiers. In fact, all the predefined classes provided by the stylesheet are created in the same way, using the ::before
pseudo-element selector, and content
.
We can see fa-heart
is f004
, and fa-heart-o
is f08a
.
If you want to reduce the class list overhead, for both your HTML and JavaScript, just adjust your own classes to represent exactly what you need.
$('.toggle').on('click', function () {
$(this).toggleClass('not-liked liked');
});
$('.once').on('click', function () {
$(this).removeClass('not-liked').addClass('liked');
});
.liked::before {
color: #600;
content: '\f004';
}
.not-liked::before {
color: #aaa;
content: '\f08a';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<span class='toggle fa not-liked'></span>
<span class='once fa not-liked'></span>
Upvotes: 4
Reputation: 134
<i class = 'fa fa-heart-o not-liked' id = "#banner"></i>
In the code you mentioned above, make sure that,
id = "banner" instead of id = "#banner"
Then you can continue to remove and add classes using jquery; your solution would work just fine or I do prefer the solution provided by @Russel
Upvotes: 1