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> 

我想一個$（） 。點擊「message_button」的link_to按鈕。每當這個按鈕/鏈接被點擊時，我希望它顯示/隱藏「消息」div。

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

Answer 1

2個問題：

1. 在我看來，就好像你有「多個ID」不好的情況下！
2. 您沒有阻止鏈接的默認行爲。 （所以當你點擊它時，頁面刷新或導航）

問題2很簡單：請撥打preventDefault()（以下使用示例）。

問題1是有點麻煩......

您正在創建一個循環中<li>內容，裏面每一個你與標識#messages和#message_button元素那些<li>標籤。 不允許。如果你願意，你可以使用class而不是id，因爲你可以有一個類的多個實例。

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

參照這個問題here，你可以很容易地得到循環的指數在Rails的模板：

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

這暴露了一個新的變量，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>