我如何使用 jquery hide/show a <panel>？

Question

我正在尝试在单击按钮时显示一个面板（其中包含两个标签并且在页面加载时隐藏）但没有成功。

当我点击一个按钮 (id=Button1) 时，它应该会显示一个面板 (id=anspanel)，但事实并非如此。相反，它保持原样，即单击按钮时没有任何反应。我不知道为什么。看看我的代码。告诉我哪里出错了，解决办法是什么。

.aspx :-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Student_Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.3/jquery-ui.js"></script>
<script type="text/javascript">
    var currentTab = 0;
    $(function () {
        $("#tabs").tabs({
            select: function (e, i) {
                currentTab = i.index;
            }
        });
    });
    $("#btnNext").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == (c - 1) ? currentTab : (currentTab + 1);
        tabs.tabs('select', currentTab);
        $("#btnPrevious").show();
        if (currentTab == (c - 1)) {
            $("#btnNext").hide();
        } else {
            $("#btnNext").show();
        }
    });
    $("#btnPrevious").live("click", function () {
        var tabs = $('#tabs').tabs();
        var c = $('#tabs').tabs("length");
        currentTab = currentTab == 0 ? currentTab : (currentTab - 1);
        tabs.tabs('select', currentTab);
        if (currentTab == 0) {
            $("#btnNext").show();
            $("#btnPrevious").hide();
        }
        if (currentTab < (c - 1)) {
            $("#btnNext").show();
        }
    });

    $(function () {
        //$("#Panel2").hide();
        document.getElementById('form1').onsubmit = function () {
            return false;
        }//Avoid Reloading
        $("#Button1").click(function () {
            if ($('#anspanel').is(":hidden")) {
                $('#anspanel').show();
       
            }
            else {
                $('#anspanel').hide();
            }

            if ($("#Button1").val() == "Show Answer") {
                $("#Button1").val("Hide Answer");
            } else {
                $("#Button1").val("Show Answer");
            }
       

        });
       
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>


        <div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
        <li><a href="#tabs-4">Tab 4</a></li>
        <li><a href="#tabs-5">Tab 5</a></li>
    </ul>
    <div id="tabs-1">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>

        <asp:Panel ID="Panel1" runat="server">

            <asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
            <br />
            <br />
            <br />
           <span>A-</span> <asp:Label ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
            <br />
            <br />
            <span>B-</span> <asp:Label ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
            <br />
            <br />
            <span>C-</span> <asp:Label ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
            <br />
            <br />
            <span>D-</span> <asp:Label ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
            <br />
            <br />
            &nbsp;&nbsp;
            <asp:Button ID="Button1" runat="server" Text="Show Answer"  />
            <br />

            <asp:Panel id="anspanel" runat="server">

                <span>Correct Answer is :-</span><asp:Label ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
                <br />
                <br />
                <asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>


            </asp:Panel>


        </asp:Panel>
        <br />
        <br />

                 </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

       
    </div>
    <div id="tabs-2">
        Tab 2 Content
    </div>
    <div id="tabs-3">
        Tab 3 Content
    </div>
     <div id="tabs-4">
        Tab 4 Content
    </div>
     <div id="tabs-5">
        Tab 5 Content
    </div>
</div>
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />

    
    </div>
    </form>
</body>
</html>

.aspx.cs :-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;


public partial class Student_Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        GridView1.DataSource = GetData("SELECT top 2 Question, Option1, Option2, Option3, Option4, CorrectAns, Explanation FROM Questions");
        GridView1.DataBind();
        foreach (GridViewRow row in GridView1.Rows)
        {
            if (row.RowType == DataControlRowType.DataRow)
            {
                Panel panel1 = (Panel)row.FindControl("Panel1");
                Panel anspanel = (Panel)panel1.FindControl("anspanel");
                anspanel.Style.Add("display", "none");
            }
        }
    }
}

private DataSet GetData(string query)
{
    string conString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds);
                return ds;
            }
        }
    }
}
}

错误：-

Server Error in '/' Application.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error: 


Line 24:                     Panel panel1 = (Panel)row.FindControl("Panel1");
Line 25:                     Panel anspanel = (Panel)panel1.FindControl("anspanel");
Line 26:                     anspanel.Style.Add("display", "none");
Line 27:                 }
Line 28:             }

Source File: e:\Way2Success\Student\Test.aspx.cs    Line: 26 

Stack Trace: 


[NullReferenceException: Object reference not set to an instance of an object.]
Student_Test.Page_Load(Object sender, EventArgs e) in e:\Way2Success\Student\Test.aspx.cs:26
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +51
System.Web.UI.Control.OnLoad(EventArgs e) +95
System.Web.UI.Control.LoadRecursive() +59
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2952

Answer 1

要通过其 ID 使用 jQuery 调用 asp.net 控件，您应该使用以下内容：$("#<%= yourButtonId.ClientID %>").

所以在你的情况下，尝试使用 $("#<%= Button1.ClientID %>").click(); 而不是 $("#Button1").click()。

Answer 2

问题是 id 将在 Button1 的位置设置为 "ct100_ContentPlaceHolder1_Button1" 并设置为 "ct100_ContentPlaceHolder1_anspanel" 到 anspanel。

有两种解决方案：

1) 将 Client Id 模式设置为静态: 为您的元素保留静态 ID。

对 Button1 和 anspanel 元素进行此更改。

<asp:Button ID="Button1" ClientIDMode="Static" runat="server" Text="Show Answer" />

和

<asp:Panel id="anspanel" ClientIDMode="Static" runat="server">

并且退出脚本必须正常工作。

2) 更改您的脚本以使用 clientId。

$("#<%= Button1.ClientID %>") 代替 $("#Button1")

和

$("#<%= anspanel.ClientID %>") 代替 $("#anspanel")

编辑 1： 在您提到它仅适用于第一个按钮后，我意识到您拥有 gridview，并且最终所有面板的 ID 都相同这不适用于 Jquery。所以我的想法是使用 class 选择器。以下是我建议您进行的一些更改...

 <asp:Panel ID="Panel1" runat="server">

  <asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'>
   ....
   ....
   <asp:Button class="panelButton" runat="server" Text="Show Answer"  />
   <br />

   <asp:Panel class="AnswerPanel" runat="server">

注意上面我在按钮和面板上添加了类。我也删除了 ID，因为它不是必需的。

然后在您的 jquery 中更改代码如下

$(".panelButton").click(function () {
   var $thisButton = $(this); //save button into a variable
   var $ansPanel = $(this).parent().find('.AnswerPanel'); //save ans panel into a variable

   if ($ansPanel.is(":hidden")) {
      $ansPanel.show();           
   }
   else {
      $ansPanel.hide();
   }

   if ($thisButton.val() == "Show Answer") {
       $thisButton.val("Hide Answer");
   } else {
       $thisButton.val("Show Answer");
   }               
});

我如何使用 jquery hide/show a <panel>？

How do I hide/show a <panel> using jquery?

javascript

c#

asp.net

jquery

webforms