添加/删除博客文章到“我的收藏夹”页面

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