javascript - Ruby on Rails jQuery : Toggle not working

Question

我正在尝试创建一个显示/隐藏 div 的按钮。这看起来相对容易，但是每当我单击此按钮时，它只会刷新，而当我继续单击它时，它会隐藏我的大部分页面。这是我到目前为止所拥有的。另外，我不知道这是否重要，但我正在为大部分 css 使用基础

应用程序.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 按钮执行 $().click 操作。每当单击此按钮/链接时，我希望它显示/隐藏“消息”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 切换到类并不能解决您的问题，因为如果您使用类，您只会在单击任何消息按钮时切换所有消息。

提到这个问题here ，您可以轻松地在 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>