logo标签列表

使用Jquery在按钮点击时隐藏/显示Div

jqueryhtmlasp.net-mvc-5
6

这应该是我写的第一个Jquery代码。我使用了 这个 和更多的例子来编写最简单的Jquery代码，在按钮点击时显示Hello（值得一提的是W3Schools）。我试图在按钮点击时显示包含Hello的div。

<div>
<input type="button" id="btn" class="btn btn-default" value="click me">
</div>

<div id="Create" style="visibility:hidden">
Hello
</div>

@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
    $(btn).click(function () {
        $(Create).show();

    });
});
</script>
}

我尝试将脚本代码写在头部、Scripts.Render之后或之前，但我不确定应该将Jquery代码放在哪里。
我将此代码附加到MVC5应用程序中。这段代码是为了学习目的而编写的。我认为视图中的其他代码与Jquery的工作无关。
@Tushar 当然应该是 $('#Create').toggle(); - Mosh Feu
使用 $('#Create').toggle();。 - Spencer Wieczorek
问题在于 show 函数将 display:none 替换为 display:block，但不会将 visibility:hidden 替换为 visibility:visible。 - Mosh Feu
你在控制台中得到了哪些错误？btn、Create 是否有定义？ - Shanimal
谢谢大家的评论和踩票。没问题，我已经解决了。@SpencerWieczorek：问题出在$和引号上。 - Vini
显示剩余3条评论
4个回答
21
<div>
<input type="button" id="btn" class="btn btn-default" value="click me">
</div>

<div id="Create" style="display:none">
Hello
</div>

@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
    $("#btn").click(function () {
        $("#Create").toggle();
    });
});
</script>
}
2
您可以在此处检查：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show 
<!DOCTYPE html>
  <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>
          $(document).ready(function(){
          $("#hide").click(function(){
            $("p").hide();
          });
          $("#show").click(function(){
            $("p").show();
          });
         });
     </script>
    </head>
    <body>

       <p>If you click on the "Hide" button, I will disappear.</p>

       <button id="hide">Hide</button>
       <button id="show">Show</button>

    </body>
 </html>
1
$(document).ready(function () {
   $("#btn").click(function () {
     $("#btn").click(function () { $("#Create").show();
   });
});
5
虽然此代码可能提供了问题的解决方案，但最好添加为什么/如何运作的背景。这可以帮助未来用户学习，并将该知识应用于他们自己的代码。当代码得到解释时，您还可能会获得用户的积极反馈，例如点赞。 - borchvm
请不要仅仅发布代码作为答案，还要提供解释您的代码是如何解决问题的。带有解释的答案通常更有帮助和更高质量，并且更有可能吸引赞同。 - Dima Kozhevin
代码存在语法错误。 - GibsonFX
0

没问题，如果这是你的第一段jQuery代码。

你可以参考W3Schools。

你的答案是：

<!DOCTYPE html>
<html>
<head>
   <title>Practice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function() {
    $("#Create").hide();
});
$(document).ready(function() {
    $("body").on("click", "#btn", function() {
        $("#Create").show();
});
</script>
</head>
<body>
<div>
<input type="button" id="btn" class="btn btn-default" value="Click Me">
</div>

<div id="Create">Hello
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接