收藏夾按鈕withXMLHttpRequest

Question

我有一個鏈接，如果點擊或查詢從數據庫是真實的圖標會顯示一個完整的心臟和信息像這樣保存在數據庫中：

<a id="fav" href="#"><i <?if($fe == 1){?>class="faved"<?}else{?>class="fav"<?}?>></i></a> 

$("#fav i.fav").click(function(){ 
       fav= new XMLHttpRequest(); 
       fav.open("GET", "http://test.php?u=<?=$user_id?>", true); 
       fav.send(); 
       $("#fav i").removeClass('fav').addClass('faved'); 
      }); 

      $("#fav i.faved").click(function(){ 
       fav= new XMLHttpRequest(); 
       fav.open("GET", "http://test.php?u=<?=$user_id?>", true); 
       fav.send(); 
       $("#fav i").removeClass('faved').addClass('fav'); 
      }); 

目前，它的偉大工程，但我遇到的問題是，如果用戶決定不喜歡頁面，它會保存另一個記錄或嘗試根據當前狀態再次刪除。我如何根據狀態切換它。例如，如果它沒有收藏，點擊它保存到數據庫，並且不刷新，再次點擊它從數據庫中刪除。

UPDATE

我也有鏈接的行動告訴我的PHP來刪除或保存記錄。 例如：http://test.php?u=<?=$user_id?>a=1（保存）http://test.php?u=<?=$user_id?>a=2（刪除）

ANSWER

基於關閉@ epascarello的回答。

$("#fav").on("click", "i.fav", function(){ 
       var icon = $(this); 
       var makeFavorite = icon.hasClass("fav"); 
       $.post("http://test.php&u=<?=$user_id?>&a=1",{isFav:makeFavorite}, function(){ 
        icon.toggleClass("fav").toggleClass("faved"); 
       }); 
      }); 



$("#fav").on("click", "i.faved", function(){ 
      var icon = $(this); 
      var delFavorite = icon.hasClass("faved"); 
      $.post("http://test.php&u=<?=$user_id?>&a=2",{isFav:delFavorite}, function(){ 
       icon.toggleClass("faved").toggleClass("fav"); 
      }); 
     }); 

Answer 1

讓它成爲一個呼叫而不是兩個。這是相同的邏輯，只是做檢查！ [假設你正在使用jQuery]

$("#fav").on("click", "i.fav, i.faved", function(){ 
    var icon = $(this); 
    var makeFavorite = icon.hasClass("fav"); 
    $.post("http://test.php?u=<?=$user_id?>",{isFav:makeFavorite}, function(){ 
     icon.toggleClass("fav").toggleClass("faved"); 
    }); 
});