0

Web サイトの「いいね」機能に AJAX を実装しようとしています。create.js.haml ファイルには次のコードがあります。

$(".postlike_unlike").html("#{escape_javascript(render('unlike'))}");

私のビューページはすべての投稿をループするので、それらはすべて同じクラスを共有します。ビュー ページのスニペットを次に示します。

- @post.each do |post|
  ...
  %ul.dropdown-menu
    %li
      ...    
    %li
      .postlike_unlike
        .form_for
          ...

レンダリングされたhtml:

<div class='post content'>
  <p>post 1</p>
</div>
<div class='btn-group dropup'>
  <a class='btn btn-primary' href='/post/3/view?view=true' method='get'>
    <i class='icon-info-sign icon-large'></i>
    View Detailed Post 1
  </a>
  <a class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>
    <span class='caret'></span>
  </a>
  <ul class='dropdown-menu'>
    <li>
      <div class='postlike_unlike'>
        <form accept-charset="UTF-8" action="/likes" class="new_like" data-remote="true" id="new_like" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="McQDJsBJF6UHTeMGQNDTBCRzF/PmP5JWWuACqv1ONCA=" /></div>
          <input id="like_likee_id" name="like[likee_id]" type="hidden" value="3" />
          <a href='javascript:void(0)' onclick="$(this).closest('form').submit()">
            <i class='icon-heart-empty icon-large'></i>
            Like this Post
          </a>
        </form>
      </div>
    </li>
    <li class='divider'></li>
  </ul>
</div>

<div class='post content'>
  <p>post 2</p>
</div>
<div class='btn-group dropup'>
  <a class='btn btn-primary' href='/post/3/view?view=true' method='get'>
    <i class='icon-info-sign icon-large'></i>
    View Detailed Post 2
  </a>
  <a class='btn btn-primary dropdown-toggle' data-toggle='dropdown'>
    <span class='caret'></span>
  </a>
  <ul class='dropdown-menu'>
    <li>
      <div class='postlike_unlike'>
        <form accept-charset="UTF-8" action="/likes" class="new_like" data-remote="true" id="new_like" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="McQDJsBJF6UHTeMGQNDTBCRzF/PmP5JWWuACqv1ONCA=" /></div>
          <input id="like_likee_id" name="like[likee_id]" type="hidden" value="3" />
          <a href='javascript:void(0)' onclick="$(this).closest('form').submit()">
            <i class='icon-heart-empty icon-large'></i>
            Like this Post
          </a>
        </form>
      </div>
    </li>
    <li class='divider'></li>
  </ul>
</div>

私が直面している問題:「いいね」ボタンをクリックすると、すべての投稿で「いいね」のスタイルがレンダリングされます。すべての投稿に「postlike_unlike」クラスがあることはわかっていますが (これはループです)、関連する投稿のクラスのみを変更する方法があるかどうかを知りたかったのです。つまり、いいねされている投稿の「いいね」のみを更新します。

私はjQueryに関しては初心者なので、達成しようとしていることを簡単に行う方法があるかどうかはわかりません。ご不明な点がございましたら、お気軽にお問い合わせください。

あなたの助けと時間をありがとう！

4

3 に答える 3

1

それぞれのいいね/いいねにクリックハンドラーをアタッチしていると仮定すると、次のようなことができます

$('.postlike_unlike').click(function(){
     //edit the html
     $(this).html("#{escape_javascript(render('unlike'))}");
})

クリックするたびに、クリックしたもの (thisキーワードで参照) が検索され、html が適用されます。

于 2012-04-30T20:31:21.920 に答える
0

または$(this).parent()または何か

于 2012-04-30T20:42:09.173 に答える
0

これはループなので、次を使用して、それぞれに一意の div コンテナーを作成することにしました。

%div{:class => "postlike_unlike#{@post.id}}

今私のjsファイルで私は以下を参照しています：

$(".postlike_unlike#{@post.id}").html("#{escape_javascript(render('unlike'))}");

このようにして、適切な投稿の「いいね」ボタンのみを変更しています。

皆様、ご協力ありがとうございました。

于 2012-05-02T14:47:04.510 に答える