找到一個特定的元素，與多個元素共享一個類，通過jquery

我想在我的網站上實現一個'喜歡'功能的AJAX。我對create.js.haml文件下面的代碼：找到一個特定的元素，與多個元素共享一個類，通過jquery

$(".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的新手，所以我不熟悉如果有一個簡單的方法來做我想完成的事情。如果您有任何問題，請隨時詢問。

感謝您的幫助和時間！

來源

2012-04-30 slovak_100

你能給我們提供HTML **嗎？ – gdoron

假設您要附加一個單擊處理每個喜歡/不象，你可以不喜歡在以下各個

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

點擊它會找到你點擊了一個（由this關鍵字引用）並應用您的HTML。

來源

2012-04-30 20:31:21

不幸的是，這似乎並沒有工作......當我使用上面的代碼時它不呈現任何東西。我添加了「alert（'ajax works！'）;」到create.js.haml文件的結尾以確認ajax正在工作，並且它關閉，但不幸的是，「不像」不是呈現。 –

我嘗試通過以下方式測試您的代碼：$（'。postlike_unlike'）。click（function（）{ alert（'ajax works！'）; }）我嘗試查看警報是否顯示。它沒。它看起來沒有找到我的postlike_unlike類？ –

或$(this).parent()什麼

來源

2012-04-30 20:42:09 11684

因爲它是一個循環，我決定使用只爲每個從獨特的div容器：

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

現在在我的js文件我引用如下：

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

這種方式我只是改變適當的職位'喜歡'按鈕。

謝謝大家的幫助。

來源

2012-05-02 14:47:04

找到一個特定的元素，與多個元素共享一個類，通過jquery

回答

相關問題