jQuery 在 Chrome 和 FF 中的 show hide 功能无法正常工作

Question

我将尝试为三个div实现简单的显示/隐藏操作。在IE中运行良好，但在Chrome或FireFox中onClick功能无法正常工作。

以下是我的代码（带有简化的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>

- Christine

---

是的，他们是。你使用的Chrome版本是什么？ - George

版本43.0.2357.65 m - 当我在Chrome的JS Fiddle上运行它时，它可以工作，但是当我在我的开发服务器上使用Chrome预览时，它却无法工作。 - Christine

一个与你的问题无关的简单建议：你应该给所有按钮添加一个类，并简单地触发 $('.myClass').hide(); $('#myButton').show()，甚至可以连接你的调用 $('#myClass1, #myClass2').hide()，这将节省几行代码和 jQuery 调用。对于 3 个按钮来说可能看起来不必要，但如果你有 20 个按钮，这可能会很有用。 - Jeff Noel

代码片段运行良好。请确保您的页面已正确链接到jQuery。我们无法提供更多信息... - Zander

为什么要将事件监听器绑定放在showHide()函数内部？这意味着您需要调用showHide()函数才能添加单击事件监听器... 这不是有缺陷的逻辑吗？（真的很好奇） - Jeff Noel

对于阅读此问题并遇到类似问题的任何人：问题在于jQuery未正确定义。 - Jeff Noel

Answer 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>

- Satpal

---

@GeorgeLee，Op已经包含在文档准备好的处理程序中了。他提供了showHide名称。 - Satpal

@GeorgeLee，请查看您提供的链接。 - Satpal

@Christine，请尝试将 showHide 从 $(function showHide() { 中移除，然后检查您的浏览器控制台是否有任何错误。 - Satpal

@Satpal，我遇到了这个错误：$ 在这一行上未定义：$(function showHide() {。无论是否包含 showHide，我都会遇到这个错误。 - Christine

@Christine，如果jQuery没有加载，请检查文件路径是否正确。尝试使用//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js进行一次测试。 - Satpal

Answer 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>

- Zack

---

谢谢分享，我的按钮原本没有 onclick 属性，后来尝试添加它们，因为无法使其正常工作。 - Christine