rails change the background of my like button when clicks on it :

user_15530720 0
Viewed 488

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 i s 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>

enter image description here

ruby-on-rails-6 erb ruby jquery javascript
1 Answers

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 %>
user_39754790
Related