javascript - 如何识别以ID开头但在JavaScript中值不同的不同ID

您好，我正在尝试使用JavaScript / CoffeeScript和Ruby on Rails：
我有几个注释（每次迭代都会在上渲染），当我单击该注释中的一个按钮时，我想在每个注释下方显示一些内容。
我这样做是为了对呈现每个注释的代码中的按钮和部分进行标识：

<div>
    <a id="show-link-<%=comment.id%>" href="#">
        This will show whats in the section
    </a>
</div>
<section id="show-section-<%=comment.id%>">
    This is what I want to show
</section>

然后我要在coffeescript中执行此操作：

$(document).on 'turbolinks:load', ->
  $('#show-link-[SOMEID]').click (event) ->
    event.preventDefault()
    $('#show-section-[SOMEID]').toggle()

我想让脚本检测每个按钮的单击情况，并显示每个注释的相应部分。
脚本中的SOMEID可以在那里识别一些数字并在函数内部使用它。
希望您能提供帮助，并感谢您的宝贵时间！

最佳答案

当你只有一把锤子...

您正在使用错误的工具来执行此工作（试图将数据嵌入ID中）。

使用数据属性和类可以更好地完成此任务。使用一个类来批量分配单击处理程序，并使用一个data属性以完整形式存储节名称，而无需进行任何处理。

<div>
    <a class='show-link' data-section-id="show-section-<%= comment.id %>" href="#">
        This will show whats in the section
    </a>
</div>
<section id="show-section-<%= comment.id %>">
    This is what I want to show
</section>

然后

$('.show-link').click (event) ->
  event.preventDefault()
  commentSectionId = $(this).data('sectionId')
  $('#' + commentSectionId).toggle()

演示版

$('.show-link').click(function(event) {
  var commentSectionId;
  event.preventDefault();
  commentSectionId = $(this).data('sectionId');
  return $("#" + commentSectionId).toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
        <a class='show-link' data-section-id="show-section-1" href="#">
            This will show whats in the section
        </a>
    </div>
    <section id="show-section-1" style='display: none'>
        This is what I want to show
    </section>