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>