Question

我试图在我的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();
  });
});

我不确定出了什么问题，有人可以帮忙吗？感谢。

Answer 1

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

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

Answer 2

由于切换已经折旧，我已经以其他方式完成了。

$(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>

Answer 3

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

Answer 4

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

Jquery隐藏显示不起作用

4 个答案: