更改类jquery

Question

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');
}

Answer 1

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>