javascript - 如何使用 jquery 隐藏/显示 <panel>？

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

当我点击一个按钮(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

最佳答案

问题是 id 将被设置为 "ct100_ContentPlaceHolder1_Button1"在你有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");
   }               
});

关于javascript - 如何使用 jquery 隐藏/显示 <panel>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36695247/

javascript - 如何使用 jquery 隐藏/显示 <panel>？

上一篇：javascript - 合并对象数组

下一篇：javascript - 使用 Javascript 检测 Opera Mini 浏览器