如何通过Rails与CoffeeScript实现页面点赞计数实时更新？

看起来你遇到的问题主要有两个核心点：一是CoffeeScript.erb里直接引用局部变量wad导致的服务器错误，二是DOM元素ID不唯一让JS没法精准定位对应计数器。我来一步步帮你搞定：

1. 先修复DOM元素的唯一性问题 #

你现在给所有点赞按钮和计数器都用了相同的ID（upvote-count、upvote-counter），但ID在页面里必须是唯一的。修改wads/actions部分的代码，把ID改成包含wad.id的形式：

<div class="wad-vote-container" data-wad-id="<%= wad.id %>">
  <%= link_to fa_icon("chevron-circle-up", class: "profile-link upvote-btn"), 
              like_wad_path(wad), 
              remote: true, 
              method: :put %>
  <span class="nowrap upvote-counter" id="upvote-counter-<%= wad.id %>">
    <%= wad.get_upvotes.size %>
  </span>
</div>

这里做了几个关键改动：

• 把原来的按钮ID换成通用类upvote-btn（ID不能重复，类才是用来批量选择元素的）
• 计数器ID改成upvote-counter-<%= wad.id %>，保证每个wad的计数器都是唯一的
• 外层容器加了data-wad-id属性，方便后续JS定位（可选但实用）

2. 调整控制器的like动作 #

因为你用了remote: true，Rails会默认期望控制器返回JS格式的响应。修改WadsController里的like方法：

def like
  @wad = Wad.find(params[:id])
  # 这里放你原来的点赞逻辑，比如：
  @wad.upvote_by(current_user)
  # 计算更新后的点赞数
  @new_upvote_count = @wad.get_upvotes.size

  respond_to do |format|
    format.js # 会自动渲染app/views/wads/like.js.erb模板
  end
end

3. 编写JS响应模板（like.js.erb） #

在app/views/wads/目录下新建like.js.erb文件，用来异步更新前端计数器：

// 找到当前wad对应的计数器，替换成最新的点赞数
$("#upvote-counter-<%= @wad.id %>").html("<%= j @new_upvote_count %>");

这里的j是escape_javascript的简写，用来转义JS里的特殊字符，避免出现语法错误。

4. 移除原来的CoffeeScript.erb代码 #

你之前写的CoffeeScript.erb里直接引用wad是行不通的——这个变量只在ERB循环渲染单个wad时存在，而CoffeeScript是全局加载的，服务器渲染CoffeeScript时根本找不到这个局部变量，直接删掉那段代码就好。

这样调整后，用户点击点赞按钮时，Rails会异步处理请求、更新数据库，然后返回JS代码自动执行，精准更新对应wad的计数器数值，完美解决你的问题。

另外作为JS/CoffeeScript新手，建议先熟悉DOM选择器的唯一性规则，以及Rails UJS（就是remote: true背后的机制）的工作逻辑，这对后续开发AJAX功能会很有帮助。

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