将博客文章添加/删除到“我的收藏夹”页面 [关闭]答案

【问题标题】：Add/remove blog post to "My favorites" page [closed]将博客文章添加/删除到“我的收藏夹”页面 [关闭]
【发布时间】：2009-08-18 15:19:07
【问题描述】：

我不熟悉 JavaScript 或 jQuery，但我需要创建一个函数来添加和删除“我的收藏”页面上的博客文章并更新已保存文章的计数器。有没有现成的解决方案 - 插件或 sn-p - 可以做到这一点？

这是我的 HTML sn-p。

<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？

【问题讨论】：

标签： jquery ajax collections add favorites

【解决方案1】：

jQuery 实际上不会删除任何东西。如果您想真正删除项目，则必须在列表的来源处执行此操作。如果您的列表由静态 HTML 组成，您将需要一种语言，如 PHP，可以访问原始文件并进行更改。如果您的列表存储在数据库中，您将需要 PHP 或 C# 等服务器端语言来进行这些更改。

jQuery 可以将数据发布到服务器端脚本，这些脚本能够删除/添加/编辑数据库中的条目。您可能有如下 PHP 脚本：

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

jQuery 可以传递一个 fvid 给这个脚本：

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

这会将一个变量发布到服务器端脚本，然后该脚本将获取该发布变量的值并删除其在数据库中的相应记录。

这是一个非常粗略的示例，但足以让您更深入地了解 jQuery 与服务器端语言和数据库的关系。

【讨论】：

Jonathan 打败了我。考虑这个问题的最好方法是作为渐进增强 (en.wikipedia.org/wiki/Progressive_enhancement) 问题。从提交给服务器的 HTML 表单开始（它返回您当前的收藏列表）。一旦开始工作，管理服务器调用的 javascript 可以在三四行 jQuery 中完成。
Johnathan，你能检查一下：我的方向是否正确？ function favorites() { $('.bookmark').click(function(event) { var request = $(this).parent.attr('id'); if ($(this).hasClass("ed") ) { //删除书签 $.post("/account/favorites/remove.htm", { favid:request }, function() { //减少计数器 $(this).toggleClass("ed"); }); } else { //添加书签 $.post("/account/favorites/add.htm", { favid:request }, function() { //增加计数器 $(this).toggleClass("ed"); }) ; } }); }
很抱歉没有格式化代码。我会在下一个答案中重复它
Jason，对不起，我在这个阶段不使用渐进增强的建议。稍后会完成。谢谢

【解决方案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
                    });
        }
    });
}

【讨论】：