Rails中jQuery通过div/span ID控制评论显示隐藏失效求助

嘿，我太懂你卡了快一周的痛点了——本来只想展开某条动态的评论，结果所有动态的评论都跟着一起动，这确实挺闹心的😅。咱们来看看问题出在哪，以及怎么快速修复：

问题根源 #

你当前的代码里，点击任意带id的<span>后，直接选中了所有带id的<div>执行fadeToggle()，自然会触发所有评论区的显示/隐藏切换。要解决这个问题，核心是让点击事件只作用于当前动态对应的评论区，而不是全局所有评论区。

具体修复方案 #

方案1：通过父容器关联（推荐，更简洁规范） #

首先调整你的HTML结构，给每个动态消息和评论区加上统一的类名，确保评论区嵌套在所属动态的容器内，比如：

<!-- 每条动态的结构示例 -->
<div class="micropost">
  <span class="toggle-comments-btn">Mostrar</span>
  <div class="micropost-comments" style="display: none;">
    <!-- 这里是该动态的评论内容 -->
  </div>
</div>

然后修改comments.coffee的代码，精准定位当前点击按钮对应的评论区：

$(document).on 'turbolinks:load', ->
  # 给所有评论切换按钮绑定点击事件
  $('.toggle-comments-btn').click (event) ->
    event.preventDefault()
    # 找到当前按钮所在的动态容器，再定位里面的评论区
    $(this).closest('.micropost').find('.micropost-comments').fadeToggle()

方案2：通过关联ID定位（适合已有ID结构的场景） #

如果你的项目已经给每个动态和评论区设置了关联的ID（比如按钮ID是toggle-comment-1，对应评论区ID是comments-1），可以用ID后缀匹配的方式：

$(document).on 'turbolinks:load', ->
  # 匹配所有以toggle-comment-开头的按钮
  $('span[id^="toggle-comment-"]').click (event) ->
    event.preventDefault()
    # 提取动态ID
    postId = $(this).attr('id').split('-')[2]
    # 找到对应ID的评论区切换显示
    $("#comments-#{postId}").fadeToggle()

小提醒 #

• 尽量避免用重复的id属性（HTML规范里id必须唯一），用类名来标记同类型元素更合理。
• 确保评论区确实嵌套在所属动态的容器内，这样closest()和find()才能正确找到目标元素。

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