Блог

Я очень новичок в Ruby on Rails и на самом деле пытаюсь реализовать аналогичную функцию на своей странице Ruby on Rails.Я пытаюсь создать клон Instagram с ruby on rails , но на этапе функции «Нравится» я застрял в том, как изменить цвет фона сердца(например, логотипа), когда пользователь нажимает на него … ? это мой индекс.html.erb :

 <div class="bg-gray-100 p-4">
 <% if user_signed_in? %>
    <% @posts.each do |post| %>
    <div class="relative py-3 sm:max-w-xl sm:mx-auto">
        <div class="bg-white border rounded-sm max-w-md">
            <div class="flex items-center px-4 py-3">
                <%= link_to image_tag(current_user.image), profile_path(current_user.username) if current_user.image.present?  %>
                <strong><%= link_to post.user.username, profile_path(post.user.username) %></strong>
            </div>
            <p>
               <% if post.image.attached?%>
               <%= link_to image_tag(post.image,style: "width: 500px; display:block", class: "overflow-hidden"), edit_post_path(post) %>
               <% end %>
            </p>
                <div class="flex items-center justify-between mx-4 mt-3 mb-2">
                    <div class="flex gap-5">
                        <%= link_to like_post_path(post),  class:"like-button", method: :put, remote: :true do %>
                        <div>
                        <p> <svg aria-label="Like" class="_8-yf5 " fill="#262626" height="24" viewBox="0 0 48 48" width="24"><path d="M34.6 6.1c5.7 0 10.4 5.2 10.4 11.5 0 6.8-5.9 11-11.5 16S25 41.3 24 41.9c-1.1-.7-4.7-4-9.5-8.3-5.7-5-11.5-9.2-11.5-16C3 11.3 7.7 6.1 13.4 6.1c4.2 0 6.5 2 8.1 4.3 1.9 2.6 2.2 3.9 2.5 3.9.3 0 .6-1.3 2.5-3.9 1.6-2.3 3.9-4.3 8.1-4.3m0-3c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 7.3 5.4 12 10.6 16.5.6.5 1.3 1.1 1.9 1.7l2.3 2c4.4 3.9 6.6 5.9 7.6 6.5.5.3 1.1.5 1.6.5.6 0 1.1-.2 1.6-.5 1-.6 2.8-2.2 7.8-6.8l2-1.8c.7-.6 1.3-1.2 2-1.7C42.7 29.6 48 25 48 17.6c0-8-6-14.5-13.4-14.5z"></path></svg></p>
                        </div>
                        <% end %>
                        <span class="likes-count"><%= post.get_upvotes.size %></span>
                        <%= link_to post_path(post.id) do %>
                            <svg aria-label="Comment" class="_8-yf5 " fill="#262626" height="24" viewBox="0 0 48 48" width="24" ><path clip-rule="evenodd" d="M47.5 46.1l-2.8-11c1.8-3.3 2.8-7.1 2.8-11.1C47.5 11 37 .5 24 .5S.5 11 .5 24 11 47.5 24 47.5c4 0 7.8-1 11.1-2.8l11 2.8c.8.2 1.6-.6 1.4-1.4zm-3-22.1c0 4-1 7-2.6 10-.2.4-.3.9-.2 1.4l2.1 8.4-8.3-2.1c-.5-.1-1-.1-1.4.2-1.8 1-5.2 2.6-10 2.6-11.4 0-20.6-9.2-20.6-20.5S12.7 3.5 24 3.5 44.5 12.7 44.5 24z" fill-rule="evenodd"></path></svg>
                        <% end %>
                    </div>
                </div>
            <div class="font-semibold text-sm mx-4 mt-2 mb-4">
                <p>
                    <%= post.caption%>
                </p>
                <div class=" comment-box " >
                    <%= render "posts/comments", post: post %>
                </div>
            </div>
            <div class="bottom border-t pt-3 mt-3">
                <%= form_for Comment.new do |f| %>
                <%= f.hidden_field :post_id, value: post.id %>
                <%= f.text_field :body, placeholder: "add comment here ..." %>
                <%= f.submit "Post", class: "comment-button text-blue-500 opacity-75 w-2/12 text-center font-bold" %>
            <% end %>
            </div>
            <div class="post-date mt-1">
                <span class="text-xs text-gray-900">
                    <%= time_ago_in_words post.created_at%>
                </span>
            </div>
        </div>    
    </div>
    <% end %>
    <p>
        <strong><%= current_user.username%></strong><br>
        <%= current_user.full_name%>
    </p>
    <% end %>
</div>
 

и это мой голос.js.erb :

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

//$(document).ready(function(){
  //  $(".like-button").click(function(){
    //    var color = $(this).attr("data-color");
      //      $(".like-button").css("background", color)
    //});
//});

 

Я пытаюсь сделать это с помощью jQuery , но со мной это не работает

Я не уверен, но я думаю vote.js.erb , что это неправильно, это мое предложение

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

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

класс liked -это кнопка изменения фона css, например

Вы могли бы сделать что-то вроде этого

HTML <p class="element"></p>

CSS

 .wave::after {
 content: "🔥";
}
.element::after {
  content: "👍";
}
 

Язык JavaScript

 $("p").click(function(){
  if ($('p').hasClass('element')){ 
$(this).removeClass('element').addClass('wave');
 } else {
$(this).removeClass('wave').addClass('element'); 
 }
 });