Question

我正在尝试在我的网站上实现一个'喜欢'功能的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'类（它是一个循环），但我想知道是否有办法只更改相关帖子上的类：即只更新喜欢的帖子上的'like'。

对于jQuery我是一个新手所以如果有一个简单的方法可以做我想要完成的事情，我就不熟悉了。如果您有任何疑问，请随时提出。

感谢您的帮助和时间！

Answer 1

假设您正在为每个喜欢/不喜欢附加点击处理程序，您可以执行类似以下内容的操作

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

每次点击它都会找到你点击的那个（由this关键字引用），并应用你的html。

Answer 2

或$(this).parent()或其他

Answer 3

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

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

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

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

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

谢谢大家的帮助。

通过jquery找到一个与多个元素共享一个类的特定元素

3 个答案: