如何在 JavaScript 中识别以相同开头但值不同的不同 id答案

【问题标题】：How to identify different id's that start with the same but vary in a value in JavaScript如何在 JavaScript 中识别以相同开头但值不同的不同 id
【发布时间】：2016-12-05 19:33:59
【问题描述】：

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

<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 可以在那里识别一些数字并在函数中使用它。希望您能提供帮助，感谢您的宝贵时间！

【问题讨论】：

为什么不让点击事件处理程序显示this 的nextElementSibling？

标签： javascript ruby-on-rails coffeescript

【解决方案1】：

当你只有一把锤子时......

您在工作中使用了错误的工具（试图在 id 中嵌入数据）。

使用数据属性和类会更好。使用类批量分配点击处理程序，使用数据属性存储完整的节名，不需要任何处理。

<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>

【讨论】：

这似乎工作正常，除了脚本的最后一行，因为在该行之前添加 alert(commentSectionId) 时，该变量是每个评论的正确变量，但 toggle() 部分似乎没有工作。是的，我在这个话题上相当不专业，但非常感谢您的帮助。
@MacuDuranti：注意双重##
我用的是'而不是"，改了，但一切都一样。是的，我正在使用双##
@MacuDuranti：您是否也重新加载了页面？我很有信心它应该会起作用。
是的，我做了好几次，我不明白为什么它不工作，我从来没有使用过双 ## 但我猜它应该可以工作。这是我单击按钮时得到的屏幕截图，以及页面代码（ID 匹配）：imgur.com/a/b9kuQ（对不起，网站是西班牙语和更改的名称）这是咖啡脚本：$(document).on 'turbolinks:load', -> $('.respuestas-link').click (event) -> event.preventDefault() commentSectionId = $(this).data('sectionId') alert(commentSectionId) $("##{commentSectionId}").toggle() 谢谢很多你的时间@sergio

【解决方案2】：

我不能用 ruby 或 coffeescript 说话，但是使用 DOM API 和 this 怎么样？

// Get all the "buttons"
var links = document.querySelectorAll(".showLink");

// Loop the "buttons" and wire an event handler to the click event
links.forEach(function(element){
  element.addEventListener("click", function(){
    
    // Find the parent of the "button" (the <div>)
    var parent = this.parentNode;
    
    // Go to that div element's next sibling and show it:
    parent.nextElementSibling.setAttribute("class", "show");
  });
});

.section {display:none;}
.show {display:block;}

<div>
    <a id="show-link-<%=comment.id%>" href="#" class="showLink">
        This will show whats in the section
    </a>
</div>
<section id="show-section-<%=comment.id%>" class="section">
    Section 1 Content
</section>

<div>
    <a id="show-link-<%=comment.id%>" href="#" class="showLink">
        This will show whats in the section
    </a>
</div>
<section id="show-section-<%=comment.id%>" class="section">
    Section 2 Content
</section>

<div>
    <a id="show-link-<%=comment.id%>" href="#" class="showLink">
        This will show whats in the section
    </a>
</div>
<section id="show-section-<%=comment.id%>" class="section">
    Section 3 Content
</section>

【讨论】：