jQuery隐藏onLoad不起作用答案

【问题标题】：jQuery hide onLoad not workingjQuery隐藏onLoad不起作用
【发布时间】：2018-07-11 03:00:01
【问题描述】：

Rails 5.1 应用程序，使用 jquery-rails（加载 jQuery 1.12.4）。我有一个功能包含在一个正在工作的页面的标题中。我修复了一个与此无关的缺失 JS 文件函数错误，现在它在加载然后翻转时看起来正确（看起来是在 Rails 控制台中加载网站图标时）。如果我导致缺少方法错误（在客户端验证 JS 中），那么这段代码可以正常工作，这意味着我还有其他事情要做。

一旦它被翻转，.togglebutton 就不起作用（这个问题在下面 Josh 的评论中得到解决）

可以在此处实时看到此行为：https://www.patchvault.org/lodges

功能：

$(document).ready(function() {
  $('.nni').toggleClass('hidden');
  $('.togglebutton').click(function() {
    $('.nni').toggleClass('hidden');
    $('.togglebutton').toggleClass('nodisplay');
  });
});

在下面 Josh 的 cmets 之后更新了函数（以及其他 SO 搜索）：

$(document).ready(function () {
  $(window).load(function () {
    $('.nni').toggleClass('hidden');
    $(document).on('click', '.togglebutton', function() {
      $('.nni').toggleClass('hidden');
      $('.togglebutton').toggleClass('nodisplay');
    });
  });
});

切换按钮代码：

<div id="button_functions">
    <a class="togglebutton nodisplay" href="javascript:;">Hide No Known Issue Lodges (16)</a>
    <a class="togglebutton" href="javascript:;">Show No Known Issue Lodges (16)</a>
  </div>

相关CSS：

.hidden,
.nodisplay { display: none; }

LI（示例）：

<ul class="lodge-list">
  <li class="lodge nni">
      <a href="/lodges/2a-trenton"><img alt="No known issues for 2A" style="width: 200px;" src="/assets/no_known_issues@2x.png"></a>

    <p class="lodge-name">
      <a href="/lodges/2a-trenton"><b>2</b> Trenton</a><br>
      <span>
        (2A)
      </span>
    </p>
  </li>
  <li class="lodge ">
        <a href="/lodges/2-5a-ntiasohen-gattopuin"><img alt="2.5 Ntiasohen Gattopuin" class="featured-image-home" src="https://patchvault.s3.amazonaws.com/uploads/issue/image/4114/list_Fish_Flap_1992.jpg?X-Amz-Expires=600&amp;X-Amz-Date=20180711T120316Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIOPOW7QY5HS62KZA/20180711/us-east-1/s3/aws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=19a5afd4d18ccb7951c756a4916aef200026ac447f45452ca66427480a6f0d27"></a>
      <!-- <= link_to image_tag(lodge.issues.first.image_url(:list)),
            lodge_path(
              lodge.slug
            ) %> -->

    <p class="lodge-name">
      <a href="/lodges/2-5a-ntiasohen-gattopuin"><b>2.5</b> Ntiasohen Gattopuin</a><br>
      <span>
        (2.5A)
      </span>
    </p>
  </li>
  [ Other lodges are one of these two styles ]
</ul>

当前正在运行。如果我重新引入控制台错误（rails 客户端表单验证缺少文件），它可以工作。但是肯定有其他事情发生，我在这里做错了导致这种情况。有什么想法吗？

【问题讨论】：

你能添加一些html吗？
尝试使用$(document).on('click', '.togglebutton', function() { ... });
在浏览器控制台中页面加载时出现一个 JS 错误。 Uncaught TypeError: Cannot read property 'querySelector' of null 可能正在解决这将解决您的问题。
@KiranShahi 添加了按钮和 UL/LI html，以及相关的 CSS 隐藏属性。
@JoshBrody 谢谢。这修复了发生错误时按钮不起作用，但应该在 onLoad 隐藏的项目仍然弹出。

标签： javascript jquery ruby-on-rails jquery-rails

【解决方案1】：

好的，所以我最终解决这个问题的方法比其他任何事情都简单：

我有将“nni”设置为“nni hidden”类的rails ERB。所以这两个类都适用于页面加载。从那里开始，JS 就更简单了：

$(document).ready(function () {
  $(document).on('click', '.togglebutton', function() {
    $('.nni').toggleClass('hidden');
    $('.togglebutton').toggleClass('nodisplay');
  });
});

也可能是一种更简单/更清洁的方法，但它确实有效。

【讨论】：