0

我正在尝试在我的网站上为“喜欢”功能实现 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

因为它是一个循环，所以我决定使用以下方法为每个 from 创建唯一的 div 容器：

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

现在在我的 js 文件中，我引用了以下内容：

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

这样，我只会更改相应帖子的“喜欢”按钮。

感谢大家的帮助。

于 2012-05-02T14:47:04.510 回答