Ruby on Rails jQuery：切換不起作用

Question

我正在嘗試創建一個顯示/隱藏div的按鈕。 這似乎相對簡單，但每當我點擊此按鈕時，它只是刷新，當我一直點擊它時，它隱藏了我的大部分頁面。 這是我到目前為止所擁有的。 此外，我不知道它是否重要，但我在大多數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>

我正在嘗試$（）。點擊動作到id為“message_button”的link_to按鈕。 只要單擊此按鈕/鏈接，我希望它顯示/隱藏“消息”div。

我是jQuery，rails和foundation的新手，所以我留下了大部分代碼以防萬一重要。 但我標記了message_button和消息div以幫助您更好地找到它。

Answer 1

2個問題：

1. 它看起來好像你有一個“多個ID”的壞情況！
2. 您沒有阻止鏈接的默認行為。 （所以當你點擊它時，頁面會刷新或導航）

問題＃2很簡單：調用preventDefault（） （下面的用法示例）。

問題＃1有點棘手......

您正在循環中創建<li>內容，在每個<li>標記內，您擁有ID為#messages和#message_button 。 不允許在同一頁面上存在多個ID實例。 如果需要，可以使用class es而不是id因為您可以擁有多個類的實例。

但是，從ID切換到Classes不會解決您的問題，就像您使用類一樣，您只需在單擊任何消息按鈕時切換所有消息。

在這里提到這個問題，您可以輕松獲取rails模板中的循環索引：

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

這將公開一個新變量index ，您可以使用該index來裝飾每個消息和帶有索引值的按鈕，然后指定要顯示的消息。

---

注意：我不確定這是否是最佳方法，但這應該有效。 我使用Rails已經有一段時間了，所以可能會有錯誤。 我已經包含下面的代碼只是為了演示可能的解決方案：

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