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

添加/删除博客帖子到“我的收藏”页面

2 个答案: