使用mvc5中的jquery显示/隐藏基于单选按钮选择的div

Question

我正在研究一个MVC5应用程序，并尝试根据选择的单选按钮隐藏/显示div。下面是我的HTML代码和脚本，由于某些我不理解的原因，它似乎不起作用。

<script>
    $(document).ready(function () {
        $("#panel1").click(function () {
            $("#p1").show(600);
            $("#p2").hide();
        });
        $("#panel2").click(function () {
            $("#p1").hide(600);
            $("#p2").show();
        });
   });
</script>

<div class="radio">
    <label> <input type="radio" name="search" value="Student" id="panel1"checked>Student</label>
    <label>  <input type="radio" name="search" value="Employee" id="panel2">Employee</label>
</div>

<div class="container" id="p1">
    <p>Div one opened</p>
</div>

<div class="container" id="p2" hidden>
    <p>Div two opened</p>
</div>

Answer 1

您忘记添加Jquery文件，在顶部添加jquery cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#panel1").click(function () {
            console.log("click");
            $("#p1").show(600);
            $("#p2").hide();
        });
        $("#panel2").click(function () {
            $("#p1").hide(600);
            $("#p2").show();
        });
    });
</script>

<div class="radio">
    <label> <input type="radio" name="search" value="Student" id="panel1"checked>Student</label>
    <label>  <input type="radio" name="search" value="Employee" id="panel2">Employee</label>
</div>

<div class="container" id="p1">
    <p>Div one opened</p>
</div>

<div class="container" id="p2" hidden>
    <p>Div two opened</p>
</div>