jQuery show hide 在 Chrome 和 FF 中不起作用答案

【问题标题】：jQuery show hide not working in Chrome and FFjQuery show hide 在 Chrome 和 FF 中不起作用
【发布时间】：2015-06-03 15:45:14
【问题描述】：

我正在尝试对三个 div 进行简单的显示/隐藏。它在 IE 中运行良好，但 onClick 功能在 Chrome 或 FireFox 中不起作用。

这是我的代码（简化了 div 内容）：

$(function showHide() {
  $("#showaudience").click(function() {
    $("#behavior").hide();
    $("#acquisition").hide();
    $("#audience").show();
  });
  $("#showbehavior").click(function() {
    $("#behavior").show();
    $("#acquisition").hide();
    $("#audience").hide();
  });
  $("#showacquisition").click(function() {
    $("#behavior").hide();
    $("#acquisition").show();
    $("#audience").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input type="button" id="showaudience" value="Audience" onClick="showHide"></input>
  <input type="button" id="showbehavior" value="Behavior" onClick="showHide"></input>
  <input type="button" id="showacquisition" value="Acquisition" onClick="showHide"></input>
</div>

<div id="audience" style="display:block;">Audience Data</div>
<div id="behavior" style="display:none;">Behavior Data</div>
<div id="acquisition" style="display:none;">Acquisition Data</div>

【问题讨论】：

呃，是的。你用的是什么版本的chrome？
版本 43.0.2357.65 m - 当我在 Chrome 上的 JS Fiddle 中运行它时它可以工作，但是当我在 Chrome 的开发服务器上预览它时它不会。
一个与您的问题无关的简单建议：您应该为所有按钮添加一个类并简单地触发 $('.myClass').hide(); $('#myButton').show() 甚至连接您的调用 $('#myClass1, #myClass2').hide() 它会节省几行和 jQuery 调用. 3 个按钮可能看起来没必要，但如果你有 20 个按钮，它可能会很有用。
片段运行良好。确保您的页面具有正确链接到 jquery 的链接。我们不能说更多......
为什么要将事件侦听器绑定放在showHide() 函数中？这意味着您需要调用showHide() 函数来添加单击事件侦听器......这不是有缺陷的逻辑吗？（真的很好奇）

标签： jquery html google-chrome

【解决方案1】：

删除 onClick="showHide" 不是必需的。

由于您已经使用 jQuery 绑定了事件处理程序，因此您不需要使用内联点击处理程序。它的语法也不正确。

另外，修改input，因为它是空元素

<input type="button" id="showaudience" value="Audience" />

$(function showHide() {
  $("#showaudience").click(function() {
    $("#behavior").hide();
    $("#acquisition").hide();
    $("#audience").show();
  });
  $("#showbehavior").click(function() {
    $("#behavior").show();
    $("#acquisition").hide();
    $("#audience").hide();
  });
  $("#showacquisition").click(function() {
    $("#behavior").hide();
    $("#acquisition").show();
    $("#audience").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input type="button" id="showaudience" value="Audience" />
  <input type="button" id="showbehavior" value="Behavior" />
  <input type="button" id="showacquisition" value="Acquisition" />
</div>

<div id="audience" style="display:block;">Audience Data</div>
<div id="behavior" style="display:none;">Behavior Data</div>
<div id="acquisition" style="display:none;">Acquisition Data</div>

【讨论】：

@GeorgeLee，Op 已经包含在文档就绪处理程序中。他提供了showHide姓名
@GeorgeLee，请通过您提供的链接
@Christine，尝试从 $(function showHide() { 中删除 showHide 并检查您的浏览器控制台中是否出现任何错误
@Satpal 我收到此错误：$ 未在此行上定义：$(function showHide() { 。无论是否包含 showHide，我都能得到它
@Christine，然后 jQuery 未加载检查文件路径是否正确。用//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js尝试一次

【解决方案2】：

您可以更改您的 jQuery onLoad 处理程序以将点击处理程序直接应用于按钮元素，并从中删除 onclick 属性，并使 <input /> 标记自包含，因为它们不需要结束标签。

$(function () {
  $("#showaudience").click(function() {
    $("#behavior").hide();
    $("#acquisition").hide();
    $("#audience").show();
  });
  $("#showbehavior").click(function() {
    $("#behavior").show();
    $("#acquisition").hide();
    $("#audience").hide();
  });
  $("#showacquisition").click(function() {
    $("#behavior").hide();
    $("#acquisition").show();
    $("#audience").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div>
  <input type="button" id="showaudience" value="Audience"/>
  <input type="button" id="showbehavior" value="Behavior"/>
  <input type="button" id="showacquisition" value="Acquisition"/>
</div>

<div id="audience" style="display:block;">Audience Data</div>
<div id="behavior" style="display:none;">Behavior Data</div>
<div id="acquisition" style="display:none;">Acquisition Data</div>

【讨论】：

感谢分享，我的按钮上最初没有 onclick 属性并尝试添加它们，因为我无法让它工作。