Html rails instagram clone（单击类似徽标时如何更改其背景色？）

我对Ruby on Rails非常陌生，实际上，我正在尝试在我的Ruby on Rails页面中实现一个类似的功能。我正在尝试用Ruby on Rails构建一个Instagram克隆，但在类似功能的步骤中，我被困在了如何在用户点击时更改心脏的背景颜色（如徽标）上？ 这是我的index.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)
    //});
//});

$（.like按钮”）.removeClass（“like”）；
$（.like按钮”）.addClass（“like按钮”）；
$（“.likes count”）.html（“”）
//$（文档）.ready（函数（）{
//$（“.like按钮”）。单击（函数（）{
//var color=$（this.attr（“数据颜色”）；
//$（.like按钮”）.css（“背景”，颜色）
//});
//});

---

我正试图用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%> ")

$（.like按钮”）.addClass（“like”）；
$（.like按钮”）.removeClass（“like”）；
$（“.likes count”）.html（“”）

---

class

liked

是css更改背景按钮，类似于您可以这样做

HTML

CSS

.wave:：after{
内容：“