rails instagram clone（点击后如何更改like logo的背景颜色？）

Posted 2023-03-16

【中文标题】rails instagram clone（点击后如何更改like logo的背景颜色？）

【英文标题】：rails instagram clone (how can i chnange the background color of the like logo when clicks on it ?)

【发布时间】：2021-08-18 07:34:49

【问题描述】：

我对 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"  viewBox="0 0 48 48" ><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"  viewBox="0 0 48 48"  ><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>

这是我的 vote.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 来执行此操作，但它不适用于我

【参考方案1】：

你可以这样做

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'); 
 
 );


https://codepen.io/Chris285/pen/xxqPBYV

【参考方案2】：

我不确定，但我认为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%> ")

class liked 是css改变背景按钮之类的