Jquery隐藏显示不工作答案

【问题标题】：Jquery Hide Show Not WorkingJquery隐藏显示不工作
【发布时间】：2016-07-29 22:40:49
【问题描述】：

我正在尝试使用我的 Jquery 来隐藏和显示文本，但它不起作用。而且我很肯定这很愚蠢。

这是我的 HTML：

<script src="js/showhide.js"></script>
<script src="js/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
      <div class="col-xs-12 col-md-4">
        <button class="btn btntruespeed" id="showdsl6">DSL 6</button>
        <p>DSL 6 is perfect for anyone who is a light Internet user.  It's perfect for those who only have 1-2 devices in the house, and they go on Facebook, and check and send emails.</p>
      </div>
  </div>
</div>

还有showhide.js文件：

$(document).ready(function(){
  $("p").hide();
  $('#showdsl6').click(function(){
    $("p").show();
  });
});

我不知道出了什么问题，有人可以帮忙吗？谢谢。

【问题讨论】：

它就像一个魅力！ jsFiddle 要切换吗？或者你的意思是根本不工作？
您好，我不知道您的文件 showhide.js 包含什么，但如果您在其中使用 jquery，最好在包含 showhide.js 之前包含 jquery.min.js。我希望这对你有帮助
@pedram 不，jsFiddle 运行良好。我不知道断开连接在哪里。
@Fender 在我的实时代码中，我用我的 showhide.js 和 jquery.min.js 交换了位置
好的@ThomasHutton，它工作正常吗？

标签： jquery html

【解决方案1】：

看起来您应该交换在页面中包含脚本的顺序。您首先包含脚本，然后包含 jQuery。但是您的脚本依赖于 jQuery，因此应该在之后包含它。除了试一试之外，您还可以通过在控制台中查看$ is undefined error 来确认这一点。

【讨论】：

我想知道为什么当你的答案实际上是正确的时候这些投反对票
它可能无法解决您遇到的所有问题，但它是解决方案的必要部分。你还在报错吗？你能把完整的错误信息贴在这里吗？
@user6136528 这是在我的控制台视图中：SyntaxError: expected expression, got '
那是你的整个 html 和你的整个 JS 文件吗？如果没有，请尽可能完整地发布它们。好像少了点什么。该代码中的任何内容似乎都不会产生您遇到的错误

【解决方案2】：

看起来您包含 js 文件的顺序是错误的。试试这个：

<script src="js/jquery.min.js"></script>
<script src="js/showhide.js"></script>

【讨论】：

@ThomasHutton 如果在加载 jquery.min.js 之前调用 $() 对象，它还不会被声明
谢谢，但我控制台中的问题是：SyntaxError: expected expression, got '

【解决方案3】：

由于切换已被贬值，我以其他方式完成了它。

$(document).ready(function(){
  $("p").hide();
  $('#showdsl6').click(function(){
   if ($("p").css("display") == "none") {
       $("p").show();
    } else {
       $("p").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/showhide.js"></script>
<script src="js/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
      <div class="col-xs-12 col-md-4">
        <button class="btn btntruespeed" id="showdsl6">DSL 6</button>
        <p>DSL 6 is perfect for anyone who is a light Internet user.  It's perfect for those who only have 1-2 devices in the house, and they go on Facebook, and check and send emails.</p>
      </div>
  </div>
</div>

【讨论】：

【解决方案4】：

$(document).ready(function(){
  $("p").hide();
  $('#showdsl6').click(function(){
    $(this).next().find('p').show();
  });
});

【讨论】：