Jquery: Как применить функцию ко многим идентификаторам

Question

У меня есть страница с div, которую я хочу отображать только при щелчке по соответствующей ссылке. Каждый div имеет идентификатор, соответствующий идентификатору отображаемого тега. Например, для моего тега с идентификатором 1 ссылка, по которой нужно щелкнуть, имеет id = "tag1s", а div с информацией об объекте имеет id = "tag1". Вот мой javascript, с которым я хочу работать в html:

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

В настоящее время это работает, если я введу определенные c идентификаторы. Но я хочу, чтобы это работало для каждого идентификатора в моих тегах @. Вот 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?

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