javascript - Ruby on Rails jQuery: Toggle not working

Question

I am trying to create a button that shows/hides a div. It seems relatively easy, but whenever I click this button, it just does a refresh, and when I keep clicking it, it hides most of my page. Here is what I have so far. Also, I dont know if it matters but I am using foundation for most of the css

application.js

$(function() {
  $(document).foundation();
});

$(document).ready(function() {

    $('#message_button').click(function() {
        $("#messages").toggle();
    });

});

_userindex.html

    <div class="row">
      <div class="small-12 columns new-button">
        <%= link_to 'New Job', new_job_path, class: 'button' %>
      </div>
    </div>

    <div class="section-container auto" data-section>
      <section>
        <p class="title" data-section-title><a href="#panel1">Active Jobs</a></p>
        <div class="content" data-section-content>
          <% if @active.present? %>
            <ul>
              <% @active.each do |job| %>
                <li class='panel'>

                  <div class="row">
                    <div class="small-12 columns">
                      <div class="row">
                        <div class="large-6 columns">
                          <span id="location"><strong>location</strong>: <%= job.location %></span>
                        </div>
                        <div class="large-6 columns">
                          <span id="status"><strong>status</strong>: <%= job.status %></span>
                        </div>
                      </div>
                      <div class='light panel bottom'>
                        <strong>job: <%= link_to job.name, job %></strong><br>
                        <%= job.description %>
                      </div>
                    </div>
                  </div>

                  <div class="row job-buttons">
                    <div class="small-6 columns">
    MESSAGES BUTTON -->>>  <%= link_to 'messages', '', class: 'button small secondary', id: "message_button" %>
                    </div>
                    <div class="small-6 columns">
                      <%= link_to 'cancel', job, method: :delete, data: {confirm: 'Are you sure?'}, class: 'button small alert' %>
                    </div>
                  </div>

                  <br />


I WANT TO HIDE THIS ENTIRE DIV ---->>>>  <div id="messages">
                    <div class="row">
                      <div class="small-12 columns">
                        <div class="panel">
                          <%= form_for(@message) do |f| %>
                            <%= f.label :body, "Description" %>
                            <%= f.text_area :body %>
                            <%= f.hidden_field :job_id, value: job.id %>
                            <%= f.submit 'Create message', class: 'button small secondary' %>
                          <% end %>
                        </div>
                      </div>
                    </div>

                    <% jobs_messages = job.messages %>
                    <% if jobs_messages.present? %>
                      <ul>
                        <% jobs_messages.each do |m| %>
                        <% if m.user_id.present? %>
                          <% user = m.user %>
                        <% else %>
                          <% user = m.runner %>
                        <% end %>
                          <li class='panel'>
                            <div class='row'>
                              <div class='small-12 columns'>
                                <p> From: <%= user.login %> </p>
                                <p> Body: <%= m.body %>
                              </div>
                            </div>
                          </li>
                        <% end %>
                      </ul>
                    <% else %>
                      <div class="empty panel">
                        <p>no messages at the moment</p>
                      </div>
                    <% end %>
                  </div>

                </li>
              <% end %>
            </ul>
          <% else %>
            <div class="empty panel">
              <p>no active jobs at the moment</p>
            </div>
          <% end %>
        </div>
      </section>
      <section>
        <p class="title" data-section-title><a href="#panel2">Completed Jobs</a></p>
        <div class="content" data-section-content>
          <% if @completed.present? %>

          <% else %>
            <div class="empty panel">
              <p>no completed jobs yet</p>
            </div>
          <% end %>
        </div>
      </section>
    </div>

I am trying to an $().click action to the link_to button with id "message_button". Whenever this button/link is clicked, I want it to show/hide the "messages" div.

I am new to jQuery, rails, and foundation, so I left most of the code just in case anything was important. But I marked the message_button and the message div to help you better find it.

Answer 1

2个问题：

1. 在我看来，您好像遇到了“多个 ID”的坏情况！
2. 您没有阻止链接的默认行为。（因此，当您单击它时，页面会刷新或导航离开）

问题 #2 很简单：调用preventDefault()（下面的使用示例）。

问题＃1有点棘手......

您正在<li>循环中创建内容，在每个<li>标签内，您都有带有 ID#messages和#message_button. 同一页面上不允许有多个 ID 实例。如果你愿意，你可以使用classes 而不是ids，因为你可以拥有一个类的多个实例。

但是，从 ID 切换到类不会解决您的问题，就像您使用类一样，当单击任何消息按钮时，您只会切换所有消息。

在这里参考这个问题，您可以轻松地在您的 rails 模板中获取循环的索引：

<% @active.each do |job, index| %>
   Your template/html code here
<% end %>

这会公开一个新变量，index您可以使用它来用索引值装饰每个消息和按钮，然后指定要显示的消息。

---

注意：我不确定这是否是最好的方法，但这应该可行。我已经有一段时间没有使用 Rails 了，所以可能会有错误。我包含下面的代码只是为了演示可能的解决方案：

应用程序.js：

$(function() {
  $(document).foundation();
});

$(document).ready(function() {

    //NOTE that I am selecting on a class here
    $('.message_button').click(function(e) {
        //You also need to prevent the default behaviour of 
        //the link. That is why the page keeps refreshing.
        e.preventDefault();

        //get the index value I appended to this elements ID
        var msgButtonIndex = $(this).attr("id").replace("message_button_","");

        //select and toggle the respective message
        $("#messages_" + msgButtonIndex).toggle();
    });

});

_userindex.html：

<div class="row">
  <div class="small-12 columns new-button">
    <%= link_to 'New Job', new_job_path, class: 'button' %>
  </div>
</div>

<div class="section-container auto" data-section>
  <section>
    <p class="title" data-section-title><a href="#panel1">Active Jobs</a></p>
    <div class="content" data-section-content>
      <% if @active.present? %>
        <ul>
          <% @active.each do |job,index| %>
            <li class='panel'>

              <div class="row">
                <div class="small-12 columns">
                  <div class="row">
                    <div class="large-6 columns">
                      <span id="location"><strong>location</strong>: <%= job.location %></span>
                    </div>
                    <div class="large-6 columns">
                      <span id="status"><strong>status</strong>: <%= job.status %></span>
                    </div>
                  </div>
                  <div class='light panel bottom'>
                    <strong>job: <%= link_to job.name, job %></strong><br>
                    <%= job.description %>
                  </div>
                </div>
              </div>

              <div class="row job-buttons">
                <div class="small-6 columns">
                  <%# Adding a "message_button" class and a decorated "message_button_{index}" ID! %>
                  <%= link_to 'messages', '', class: 'button small secondary message_button', id: "message_button_" + index.to_s %>
                </div>
                <div class="small-6 columns">
                  <%= link_to 'cancel', job, method: :delete, data: {confirm: 'Are you sure?'}, class: 'button small alert' %>
                </div>
              </div>

              <br />

              <%# decorating this ID too %>
              <div id="messages_<%= index.to_s %>">
                <div class="row">
                  <div class="small-12 columns">
                    <div class="panel">
                      <%= form_for(@message) do |f| %>
                        <%= f.label :body, "Description" %>
                        <%= f.text_area :body %>
                        <%= f.hidden_field :job_id, value: job.id %>
                        <%= f.submit 'Create message', class: 'button small secondary' %>
                      <% end %>
                    </div>
                  </div>
                </div>

                <% jobs_messages = job.messages %>
                <% if jobs_messages.present? %>
                  <ul>
                    <% jobs_messages.each do |m| %>
                    <% if m.user_id.present? %>
                      <% user = m.user %>
                    <% else %>
                      <% user = m.runner %>
                    <% end %>
                      <li class='panel'>
                        <div class='row'>
                          <div class='small-12 columns'>
                            <p> From: <%= user.login %> </p>
                            <p> Body: <%= m.body %>
                          </div>
                        </div>
                      </li>
                    <% end %>
                  </ul>
                <% else %>
                  <div class="empty panel">
                    <p>no messages at the moment</p>
                  </div>
                <% end %>
              </div>

            </li>
          <% end %>
        </ul>
      <% else %>
        <div class="empty panel">
          <p>no active jobs at the moment</p>
        </div>
      <% end %>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#panel2">Completed Jobs</a></p>
    <div class="content" data-section-content>
      <% if @completed.present? %>

      <% else %>
        <div class="empty panel">
          <p>no completed jobs yet</p>
        </div>
      <% end %>
    </div>
  </section>
</div>