Rails Instagram克隆项目点击点赞按钮时如何将心形图标变为红色

问题根源 #

你当前代码存在3个核心错误：

1. vote.js.erb的else分支逻辑错误，直接移除了like-button类，导致按钮基础样式丢失、后续状态切换失效
2. 全局选择器$(".like-button")会命中页面所有点赞按钮，列表页会出现所有帖子点赞状态同步变更的问题
3. 缺少.liked类对应的红色心形样式定义

修复步骤 #

1. 给点赞元素添加唯一标识

修改点赞按钮代码，为按钮和计数标签添加带帖子ID的唯一ID，避免多元素冲突：

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

2. 修正vote.js.erb逻辑

将错误的类移除逻辑修正，同时使用唯一ID选择器操作对应帖子的元素：

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

3. 添加点赞状态样式

在项目全局样式文件（如app/assets/stylesheets/application.css）中添加对应样式：

/* 未点赞默认灰色 */
.like-button i {
  color: #cccccc;
  transition: color 0.2s ease;
}
/* 点赞后变为红色 */
.like-button.liked i {
  color: #e74c3c;
}

内容的提问来源于stack exchange，提问作者Fazaa Majdeddine