如何使用jquery隐藏/显示？

我正在努力显示一个面板（其中包含两个标签，并在页面加载时隐藏）按钮单击但未获得成功。

当我点击一个按钮（id = Button1）然后它应该显示一个面板（id = anspanel），但它不会发生这样的事情。 而不是它保持原样，即按钮点击没有任何反应。 我找不到原因。 看看我的代码。 告诉我我在哪里犯错，解决方案是什么。

.aspx： –

         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"); } }); });    
 
 
 
 
Tab 1
 
Tab 2
 
Tab 3
 
Tab 4
 
Tab 5
 
 
      <asp:Label ID="Label1" runat="server" Text=''> 
 
 
 A- <asp:Label ID="Label2" runat="server" Text=''> 
 
 B- <asp:Label ID="Label3" runat="server" Text=''> 
 
 C- <asp:Label ID="Label4" runat="server" Text=''> 
 
 D- <asp:Label ID="Label5" runat="server" Text=''> 
 
     
  Correct Answer is :-<asp:Label ID="Label6" runat="server" Text=''> 
 
 <asp:Label ID="Label7" runat="server" Text=''>   
 
     
 
 Tab 2 Content 
 
 Tab 3 Content 
 
 Tab 4 Content 
 
 Tab 5 Content 
 
   
 
   

.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将被设置为"ct100_ContentPlaceHolder1_Button1" ，其中你有Button1和"ct100_ContentPlaceHolder1_anspanel"到anspanel 。

有两种解决方案：

1） 将客户端ID模式设置为静态 ：到您的元素，以便保留静态ID。

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

和

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

2） 更改脚本以使用clientId。

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

和

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

---

编辑1：在你提到它只适用于第一个按钮后，我意识到你有了gridview，你将最终拥有与所有面板相同的id，这对于Jquery来说效果不佳。 所以我的想法是使用class选择器。 以下是我建议你做的一些改变……

    .... ....  
  

请注意，我已经在按钮和面板中添加了类。 我也删除了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"); } }); 

Answer 2

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

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