使用 Jquery 在按钮单击时隐藏/显示 Div [英] Hide/Show Div on button click using Jquery

问题描述

这应该是我编写的第一个 Jquery 代码.我已经使用 this 和更多示例来制作最简单的 jquery 代码来显示你好，点击按钮(W3Schools 值得一提).我试图在单击按钮时显示一个包含 Hello 的 div.

<input type="button" id="btn" class="btn btn-default" value="点击我">
<div id="Create" style="visibility:hidden">你好

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

我曾尝试在很多地方编写脚本代码，例如在 Scripts.Render 之后、之前的头部.我不太确定应该将 Jquery 代码放在哪里.

我将此代码附加到 MVC5 应用程序中.此代码是为学习目的而编写的.我认为视图中的其他代码与 Jquery 的工作无关.

解决方案

<input type="button" id="btn" class="btn btn-default" value="点击我">
<div id="Create" style="display:none">你好

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

This is supposed to be my first Jquery code that I am writing. I have used this and many more examples to make the simplest jquery code to display Hello on Button Click(W3Schools worth mentioning). I am trying to show a div that contains the Hello in it on a button click.

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

I have tried writing the Script code many places like in the head, after the Scripts.Render, before it. I am not really sure where i should place the Jquery code.

I have this code appended to a MVC5 application. This code is written for learning purpose. I think the other code in the View is irrelevant for the working of the Jquery.

解决方案

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

这篇关于使用 Jquery 在按钮单击时隐藏/显示 Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！