Jquery：如何将函数应用于许多 id答案

【问题标题】：Jquery: How to apply a function to many idsJquery：如何将函数应用于许多 id
【发布时间】：2020-08-24 07:52:21
【问题描述】：

我有一个 div 页面，我只想在单击正确的链接时才显示该页面。每个 div 都有一个对应于要显示的标签 id 的 id。例如，对于我的 id 为 1 的标签，要点击的链接有一个 id="tag1s"，而带有对象信息的 div 有一个 id="tag1"。这是我想在 html 中工作的 javascript：

<script>
  $(document).ready(function() {
    $('tag'+id+'s').click(function(event) {
      event.preventDefault();
      $('#tag'+id).toggle();
    });
  });
</script>

目前，如果我输入特定的 ID，这将有效。但我希望这适用于我的@tags 中的每个 id。这是html：

<h1>Tags</h1>
<div class="home unlimited">
  <div class="flex-container top-row">
    <div class="tag-buttons">
        <% @tags.each do |tag| %>
            <%= link_to "#", id:"tag#{tag.id}s", class:"tag-btn"  do%>
                <div class="tag-button">
                    <%= tag.name %>
                </div>
            <% end %>
        <% end %>
        <div class="tag-button">
          <%= render :partial => 'layouts/create_tags', :locals => { :tag => Tag.new} %>
        </div>
    </div>

    <div class="tag-display">
      <% @tags.each do |tag| %>
        <div id=<%="tag#{tag.id}"-%> class="individual-tags">
            <%= render :partial => "show_display", :locals => { :courses => @tag_relation_c[tag], :lessons => @tag_relation_l[tag], :tag => tag } %>
        </div>
      <% end %>
    </div>
  </div>
</div>

怎样才能让我可以为每个 tag_id 工作？

【问题讨论】：

不要使用ids，因为它们需要您现在处理的脆弱代码。相反，请考虑在需要以相同方式处理的元素上使用类。
@marcus 我尝试使用类，但即使在特定情况下也不起作用。如果我使用类，我不会遇到同样的问题吗？
根据您的示例，您似乎可以将所有元素作为 individual-tags 类的目标。
但我只希望特定的 div 可见，我将如何使它只有带有 tag_id 的特定 div 变得可见，而不是其余的？

标签： javascript html jquery ruby-on-rails

【解决方案1】：

很近了。只需将选择器放在按钮按下的类上，然后从按钮的属性中读取 id，就像这样......

<script>
  $(document).ready(function() {
    $('tag-btn').click(function(event) {
      var id = $(this).data('tag-id');
      event.preventDefault();
      $('#tag'+id).toggle();
    });
  });
</script>

然后相应地更改您的标记...

<h1>Tags</h1>
<div class="home unlimited">
  <div class="flex-container top-row">
    <div class="tag-buttons">
        <% @tags.each do |tag| %>
            # The line below is all that changes
            <%= link_to "#", class:"tag-btn", data: { tag_id: tag.id % } do%>
                <div class="tag-button">
                    <%= tag.name %>
                </div>
            <% end %>
        <% end %>
        <div class="tag-button">
          <%= render :partial => 'layouts/create_tags', :locals => { :tag => Tag.new} %>
        </div>
    </div>

    <div class="tag-display">
      <% @tags.each do |tag| %>
        <div id=<%="tag#{tag.id}"-%> class="individual-tags">
            <%= render :partial => "show_display", :locals => { :courses => @tag_relation_c[tag], :lessons => @tag_relation_l[tag], :tag => tag } %>
        </div>
      <% end %>
    </div>
  </div>
</div>

【讨论】：

我试过这个，甚至添加了“。”到“.tag-btn”，但 tag_id 数据没有通过。当我执行 console.log($(this).data('tag_id'); 它打印未定义。
好的，在 javascript 中，我将 $(this).data('tag_id') 更改为“tag-id”，现在它似乎可以工作了。谢谢！
是的，总是忘记这一点。固定。