ブログの投稿を「お気に入り」ページに追加/削除する

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のような、rawファイルにアクセスして変更を加えることができる言語が必要です。あなたのリストがデータベースに格納されている場合は、変更を加えるためにPHPやC＃のようなサーバ側言語が必要になります。

jQueryは、データベースのエントリの削除/追加/編集機能を持つサーバー側のスクリプトにデータを送信できます。あなたのようなPHPスクリプトを持っているかもしれません、以下：これは、サーバーサイドスクリプトに変数を投稿するだろう

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

、その後、かかるだろう：

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

jQueryのは、このスクリプトにfavidを渡すことができますその投稿変数の値を返し、データベース内の対応するレコードを削除します。

これは非常に粗末な例ですが、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 
        }); 
     } 
    }); 
}