当点击它时，rails会改变我的like按钮的背景：

Question

I'm in the last step of my rails application (instagram-clone ), and the issue is when i click on heart logo the count of number of likes upgraded from 0 to 1 but, i can't find the solution to change the background color of my logo to "red" when i click on it, this is my logo image

this is my vote.js.erb:

<% if current_user.liked? @post %>
    $(".like-button").addClass("liked");
<% else %>
    $(".like-button").removeClass("like-button");
<% end %>
$(".likes-count").html(" <%= @post.get_upvotes.size%> ")

#i want to modify this lines to change the background color of my heart logo to red when the count of likes was upgraded from 0 to 1 and thanks a lot

this is my like button code lines:

<%= link_to like_post_path(post),  class:"like-button", method: :put, remote: :true do %>
    <div>
      <i class="fas fa-heart fa-2x"></i>
    </div>
    <% end %>
<span class="likes-count"><%= post.get_upvotes.size %></span>

Answer 1

Ok here is your option. There could be many stories/photos you might be looking and scrolling through the list.

Here is the fix that suit this kind of scenarios.

Some changes in vote.js.erb:

<% if current_user.liked? @post %>
    $(".like-button-<%= @post.id %> .fas").addClass("liked");
<% else %>
    $(".like-button-<%= @post.id %> .fas").removeClass("liked");
<% end %>

$(".likes-count").html(" <%= @post.get_upvotes.size%> ")

---

As you are using icon, Somewhere in the style add css similar to below.

  .liked {
    color: red;
  }

---

And some changes in your html button

<%= link_to like_post_path(post),  class: "like-button-#{post.id}", method: :put, remote: :true do %>
    <div>
      <i class="fas fa-heart fa-2x <%= 'liked' if current_user.liked?(post) %>"></i>
    </div>
<% end %>