Question

我有一个简单的jquery.hide()函数，它位于所有带有“groups”类的div上。但由于某种原因，它不起作用，我不知道为什么。我正在使用rails 3，并且都将jquery放在application.js文件中，并将实际文件'edit'放在script标签中。两者都不起作用。谁能明白为什么？

这是我的.html.erb文件

<h1 class="head">Edit information</h1>
<%= form_for(@user) do |f| %>
  <%= render 'shared/error_messages', :object => f.object %>
  <div class="field">
    <%= f.label :username %><br />
    <%= f.text_field :username, :disabled => 'disabled' %>
  </div>
  <div class="field">
      <%= f.label :full_name %><br />
      <%= f.text_field :full_name%>
  </div>
  <div class="field">
    <%= f.label :email %><br />
    <%= f.text_field :email %>
  </div>
  <%= javascript_include_tag 'application' %>

  <div class="groups">
        <%= f.label :password %><br />
        <%= f.text_field :current_password %>

        <%= f.label :password_confirmation %><br />
        <%= f.text_field :current_password %>

        <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
        <%= f.password_field :current_password %>
  </div>

  <% if current_user.has_role? :Admin %>
  <div class="field">
  <div style="width:150px"><legend >Group</legend>
      <table border="1" width="100%">
      <tr>
            <th></th>
            <th></th>
      </tr>
      <% for role in @roles %>
      <tr>
            <td><%= role.name %></td>
            <td><%= check_box_tag "user[role_ids][]", role.id, @user.roles.include?(role) %></td>
      <tr>
      <% end %>
      </table>
      </div>
  </div>
<% else %>
<% end %>
<div class="actions">
    <%= f.submit "Update" %>
</div>
<% end %>
<%= button_to 'Back', user_path(@user) %>

和我在js文件中使用的jquery以及html.erb文件的顶部

function (){
    $('.groups').hide();
};

值得注意的是，我试过：

$(document).ready (function (){
    $('.groups').hide();
});

以及。

app.js文件和jquery一样加载到页面中。这是漫长的一天代码，所以我可能会遗漏一些明显的代码。

更新

<!DOCTYPE html>
<html>
  <head>
    <title>PadOnRails | Edit user</title>
      <meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="p64cHvc9nuBXOOHeV08Kg9FBsRxgQZlehw2xetHs57c="/>
      <!-- Stylesheets -->
<link href="/stylesheets/custom.css?1313743921" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/blueprint/screen.css?1313067331" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/blueprint/print.css?1312273016" media="print" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery-ui.css?1313072205" media="screen" rel="stylesheet" type="text/css" />
      <script src="/javascripts/jquery-1.6.2.min.js?1312273015" type="text/javascript"></script>

<script src="/javascripts/jquery-ui-1.8.14.custom.min.js?1312273015" type="text/javascript"></script>
<script src="/javascripts/jquery_ujs.js?1312273015" type="text/javascript"></script>
<script src="/javascripts/jquery.dataTables.min.js?1312800139" type="text/javascript"></script>
<script src="/javascripts/datatable.js?1313666950" type="text/javascript"></script>
<script src="/javascripts/rails.validations.js?1312877646" type="text/javascript"></script>  
<script src="/javascripts/error_messages.js?1313056625" type="text/javascript"></script>
<script src="/javascripts/jquery.dataTables.columnFilter.js?1312807797" type="text/javascript"></script>
<script src="/javascripts/application.js?1313762558" type="text/javascript"></script>

    </head>

    <body>
        <!-- Container for all the content on the page -->
        <div class="container header">
            <header>
    <div id="top-menu">
        <div id="account">
        <ul>
        <li>Logged in as: <b>admin</b>&nbsp;&nbsp;</li>

        <li>Current IP: <b>127.0.0.1</b>&nbsp;&nbsp;</li>
        <li><a href="/users/6" class="round">My Account</a></li>
        <li><a href="/logout" class="round">Sign out</a></li>
        </ul>
        </div>
        <ul>
        <li><a href="/" class="round">Home</a></li>

        </ul>
    </div>
</header>

            <div class=" maintitle">
                <div class="lefthead">
                 <a href="/"><img alt="Matflo" src="/images/logo.png?1312273015" /></a>
                </div>
                <div class="righthead">
                PAD
                </div>

            </div>
        </div>
                  <!-- Get contents from pages -->
                <div class="container main">
                <!-- Messages Blueprint => :error [red], :success [green], :info [blue] and :notice [yellow] -->
                <h1 class="head">Edit information</h1>
<form accept-charset="UTF-8" action="/users/6" class="edit_user" id="edit_user_6" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="p64cHvc9nuBXOOHeV08Kg9FBsRxgQZlehw2xetHs57c=" /></div>



  <div class="field">
    <label for="user_username">Username</label><br />

    <input disabled="disabled" id="user_username" name="user[username]" size="30" type="text" value="admin" />
  </div>
  <div class="field">
      <label for="user_full_name">Full name</label><br />
      <input id="user_full_name" name="user[full_name]" size="30" type="text" value="admin" />
  </div>
  <div class="field">
    <label for="user_email">Email</label><br />

    <input id="user_email" name="user[email]" size="30" type="text" value="admin@dai.co.uk" />
  </div>

  <div class="groups">
        <label for="user_password">Password</label><br />
        <input id="user_current_password" name="user[current_password]" size="30" type="text" />

        <label for="user_password_confirmation">Password confirmation</label><br />
        <input id="user_current_password" name="user[current_password]" size="30" type="text" />

        <label for="user_current_password">Current password</label> <i>(we need your current password to confirm your changes)</i><br />

        <input id="user_current_password" name="user[current_password]" size="30" type="password" />
  </div>

  <div class="field">
  <div style="width:150px"><legend >Group</legend>
      <table border="1" width="100%">
      <tr>
            <th></th>
            <th></th>

      </tr>
      <tr>
            <td>Developer</td>
            <td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="1" /></td>
      <tr>
      <tr>
            <td>Corporate</td>
            <td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="2" /></td>

      <tr>
      <tr>
            <td>ProjectManager</td>
            <td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="3" /></td>
      <tr>
      <tr>
            <td>Admin</td>
            <td><input checked="checked" id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="4" /></td>

      <tr>
      <tr>
            <td>TeamLeader</td>
            <td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="5" /></td>
      <tr>
      <tr>
            <td>Engineer</td>
            <td><input id="user_role_ids_" name="user[role_ids][]" type="checkbox" value="6" /></td>

      <tr>
      </table>
      </div>
  </div>
<div class="actions">
    <input id="user_submit" name="commit" type="submit" value="Update" />
</div>
</form><form method="post" action="/users/6"  class="button_to"><div><input type="submit" value="Back" /><input name="authenticity_token" type="hidden" value="p64cHvc9nuBXOOHeV08Kg9FBsRxgQZlehw2xetHs57c=" /></div></form>

            </div>
        </div>

        <!-- Debug information outside page container- REMOVE WHEN FINISHED! -->
    </body>
    <div class="container">
    <div id="bottom-menu">
        <pre class='debug_dump'>--- !map:ActiveSupport::HashWithIndifferentAccess 
action: edit
id: &quot;6&quot;
controller: users
</pre>
    </div>
    </div>

</html>

根据要求直接从源代码中获取Html。

Answer 1

确保不包含原型，任何库都可以使用'$'。试试这个：

jQuery(document).ready(function(){
    jQuery(".groups").hide();
});

额外：如果您使用HTML元素编写脚本，则正确使用双引号表示法（“”）。

为什么我的jquery .hide（）不工作？

1 个答案: