Question

这应该是我写的第一个Jquery代码。我使用this和更多示例来制作最简单的jquery代码，以便在Button Click（W3Schools值得一提）上显示Hello。我试图在按钮点击时显示包含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应用程序。此代码是为学习目的而编写的。我认为View中的其他代码与Jquery的工作无关。

Answer 1

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

Answer 2

You Ca在这里查看 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>

Answer 3

$(document).ready(function () {
   $("#btn").click(function () {
     $("#btn").click(function () { $("#Create").show();
   });
});

Answer 4

当然，如果这是您的第一个 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>

使用Jquery在按钮上单击隐藏/显示Div

4 个答案: