Good evening, I can not run this code: in practice, you add the new class but you do not delete the old one. It's a simple system of like and dislike
$query2 = mysql_query("SELECT * FROM totlike WHERE id_user_like = $id_user AND id_post_like = ". $risultato['id']."");
if (mysql_num_rows($query2) == 1) {
$like = '<i class="glyphicon glyphicon-heart" id="'. $risultato['id'] .'"></i>';
} else {
$like = '<i class="glyphicon glyphicon-heart-empty" id="'. $risultato['id'] .'"></i>';
}
var elem = $('#' + id_post).attr('class');
if (elem == "glyphicon glyphicon-heart") {
$('#' + id_post).removeClass('glyphicon glyphicon-heart').addClass('glyphicon glyphicon-heart-empty');
} else {
$('#' + id_post).removeClass('glyphicon glyphicon-heart-empty').addClass('glyphicon glyphicon-heart');
}
I have cleaned up your code a little, but generally it seems fine. I am not sure if this will help but the snippet below shows it working fine.
function toggleHeart(id_post) {
var element = $('#' + id_post);
if (element.hasClass("glyphicon-heart")) {
element.removeClass('glyphicon-heart');
element.addClass('glyphicon-heart-empty');
} else {
element.removeClass('glyphicon-heart-empty');
element.addClass('glyphicon-heart');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<p>Click on the button or heart to toggle</p>
<i class="glyphicon glyphicon-heart" id="1" onClick="toggleHeart(1)">1</i>
<button onClick="toggleHeart(1)">Toggle</button>
<br />
<i class="glyphicon glyphicon-heart-empty" id="2" onClick="toggleHeart(2)">2</i>
<button onClick="toggleHeart(2)">Toggle</button>
</div>