添加/刪除博客文章到「我的收藏夾」頁面

Question

我不熟悉JavaScript或jQuery，但我需要創建一個功能來在「我的收藏夾」頁面添加和刪除博客文章並更新已保存文章的計數器。有沒有現成的解決方案 - 插件或片段 - 可以做到這一點？

這是我的HTML代碼片段。

<h1> 
    <a href="http://www.example.com/add-post-to-my-favorites-page.htm" id="post_0064"> 
     <span class="bookmark" title="My Favorites — Add/Remove">Favorites </span>Heading 
    </a> 
</h1> 
<p>Body copy.</p> 
[...] 
<ul class="ul_favs"> 
[...] 
    <li id="bookmarks"> 
     <a href="http://www.example.com/account/favs.htm">My Favorites</a> 
     <sup><!-- Counter -->46</sup> 
    </li> 
</ul> 

我認爲它可以用$.ajax完成，但我不知道如何。也許like this？

Answer 1

jQuery實際上不會刪除任何內容。如果你想真的刪除項目，你必須這樣做在列表的來源。如果您的列表是由靜態HTML組成的，那麼您需要一種像PHP這樣的語言來訪問原始文件並進行更改。如果您的列表存儲在數據庫中，則需要使用服務器端語言（如PHP或C＃）來進行這些更改。

jQuery可以將數據發佈到服務器端腳本，該腳本能夠刪除/添加/編輯數據庫中的條目。你可能有一個像PHP腳本如下：

if ($_POST) { 
    $favid = $_POST["favid"]; 
    remove_favorite($favid); 
} 

的jQuery能通過一項favid這個腳本：

$.post("removefav.php", {favid:121}); 

這一個變量發佈到服務器端腳本，然後它會使用該發佈變量的值並刪除其在數據庫中的相應記錄。

這是一個非常粗略的例子，但應該足以讓您更多地理解jQuery與服務器端語言和數據庫的關係。

Answer 2

function favorites() { 
    $(".bookmark").click(function(event) { 
     var request = $(this).parent.attr("id"); 
     var counter = parseInt($("#bookmarks sup").text()); 
     if ($(this).hasClass("ed")) { 
      //Remove bookmark 
      $.post("/account/favorites/remove.htm", { favid:request }, 
        function() { 
         $("#bookmarks sup").text(--counter); // Decrease counter 
         $(this).toggleClass("ed"); //Toggle class of clicked element 
        }); 
     } else { 
      //Add bookmark 
      $.post("/account/favorites/add.htm", { favid:request }, 
        function() { 
         $("#bookmarks sup").text(++counter); // Increase counter 
         $(this).toggleClass("ed"); //Toggle class of clicked element 
        }); 
     } 
    }); 
}