Ajax画像の変更に関する問題

Question

私はレールアプリを持っており、好き嫌いのためにacts_as_votableの宝石を使っています。

郵便は好きかもしれません。

私は「好きな」ボタンをクリックしてイメージソースが変わるようにしようとしていますが、ページをリロードすることなく同様のカウントを更新するためにajaxを使用しています。

現在のところ、これは「違う」ボタンでのみ機能しますが、何らかの理由で好きなボタンでは機能しません。ここで

は私_votes部分である：ここでは

<% if current_user.liked? post %> 
    <%= link_to unlike_post_path(post), remote: true, method: :put, class: 'unlike' do %> 
     <%= image_tag("/assets/like.png", id: "like") %> 
    <% end %> 
<% else %> 
    <%= link_to like_post_path(post), remote: true, method: :put, class: 'like' do %> 
     <%= image_tag("/assets/heart.png", id: "heart") %> 
    <% end %> 
<% end %> 

は私index.html.erb（縮小さ）である：ここでは

<span id="likes_<%= post.id %>"> 
    <%= post.cached_votes_up %> 
    <% if post.cached_votes_up == 1 %> 
     like 
    <% else %> 
     likes 
    <% end %> 
</span> 

は私のlike.js.erb次のとおりです。ここで

$('.like').bind('ajax:success', function() { 
    $('#likes_<%= @post.id %>').html('<%=escape_javascript @post.get_upvotes.size.to_s %>'); 
    $("#heart").attr("src", "/assets/like.png"); 
}); 

は私unlike.js.erbです：

$('.unlike').bind('ajax:success', function() { 
    $('#likes_<%= @post.id %>').html('<%=escape_javascript @post.get_upvotes.size.to_s %>'); 
    $("#like").attr("src", "/assets/heart.png"); 
}); 

ご覧のとおり、両方のajaxファイルは似ていますが、unlike.js.erbファイルのみが実際に画像を変更します。

画像のパスがすべて正しいことを確認しましたが、#heartの画像がlike.pngの画像に変更されない理由はわかりません。

Answer 1

あなたは多くの記事を持っており、IDは

$("#heart").attr("src", "/assets/like.png");が細かい

を動作しない場合がありますが、特定のID

で各画像を参照する必要があり、2箇所以上であってもよいので、

代わりに、$("#heart_<%= @post.id %>").attr("src", "/assets/like.png");

あなたのjs.erbがある

<%= link_to like_post_path(post), remote: true, method: :put, class: 'like' do %> 
    <%= image_tag("/assets/heart.png", id: "heart_#{post.id}") %> 
<% end %> 

：ようなあなたのhtmlがあること

。

$('.like').bind('ajax:success', function() { 
    $('#likes_<%= @post.id %>').html('<%=escape_javascript @post.get_upvotes.size.to_s %>'); 
    $("#heart_<%= @post.id %>").attr("src", "/assets/like.png"); 
});