使用jquery添加/删除类（在视图或代码背后）

Question

我有一个asp.net webfore应用程序，它在页面上有一个手风琴，并且它有一些字段。在第一个asp：文本框中，它有一个onclick，因为它检查我的db以查看用户是否存在。如果他们做了一个asp：标签，然后显示。

我遇到的问题是，当我点击外部或标签出该字段时，手风琴关闭，我需要它保持打开状态。我认为虽然是可以通过JQuery做到这一点，即使我的领域有onclick或我需要将它添加到我的代码后面吗？

在我看来，我试图

$("#MainContent_txtRemoveUser").on("blur", function() 
{ 
    if ($('#MainContent_txtRemoveUser').val() != '') 
    { 
     $('panel-collapse collapse').removeClass('collapse'); 
     $(this).addClass('in'); 
    } 
}); 

，但它不工作

在我后面的代码我试图

#region Checks if user exists in 'Users' db when field clicked out of 
protected void txtRemoveUser_TextChanged(object sender, EventArgs e) 
{ 
    if (!string.IsNullOrEmpty(txtRemoveUser.Text)) 
    { 
     string connection = ConfigurationManager.ConnectionStrings["PaydayLunchConnectionString1"].ConnectionString; 
     SqlConnection conn = new SqlConnection(connection); 

     conn.Open(); 
     SqlCommand cmd = new SqlCommand("SELECT 1 FROM Users WHERE Name = @Name", conn); 
     cmd.Parameters.AddWithValue("@Name", txtRemoveUser.Text); 
     SqlDataReader rd = cmd.ExecuteReader(); 

     if (rd.HasRows) 
     { 
      removeUserNotExist.Visible = false; 
      ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>function endRequestHandler(sender, args){$('#collapseOne').collapse.in()};</script>", false); 
     } 
     else 
     { 
      removeUserNotExist.Visible = true; 
      ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "tmp", "<script type='text/javascript'>function endRequestHandler(sender, args){$('#collapseOne').collapse.in()};</script>", false); 
     } 
    } 
} 
#endregion 

，但是这也不能正常工作

我的手风琴的HTML是

<div id="RemoveUser" class="panel-group"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="accordion-toggle collapsed">Remove Users From The List</a> 
      </h3> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <p>If you would like to remove yourself or someone else from the list, please populate all the fields below ensuring to enter the <b>FULL</b> name of the user (whether its you or another user) and then click the 'Remove From List' button.</p>      
       <asp:Label ID="removeUserNotExist" runat="server" Text="The user entered does not exist. Please try again." Visible="false" style="color: red"></asp:Label> 
       <div class="form-group">   
        <asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label> 
        <div class="col-sm-3"> 
         <asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" AutoPostBack="true" OnTextChanged="txtRemoveUser_TextChanged" /> 
        </div> 
       </div>      
       <div class="row"> 
        <div class="col-sm-offset-8 col-sm-3" style="padding-left: 0px"> 
         <asp:Button runat="server" ID="btnRemoveUser" Text="Remove From List" CssClass="btn btn-danger" data-toggle="modal" data-target="#removeUserModal" data-backdrop="static" data-keyboard="false" ToolTip="Click to remove the specified user from the payday lunch list." /> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

这些都不起作用。尽管我所做的事情可能完全错误。

Answer 1

的accordion的状态迷路回发（这将产生触发文本框的文本改变事件）。处理此问题的一种方法是将该值保留在隐藏字段中，然后使用该值重置accordion。

在.aspx添加

<asp:HiddenField runat="server" ID="SetAccVisible" /> 

然后相应的JavaScript修改：

$('document').ready(function() { 
     var hdnFldId = '<%= SetAccVisible.ClientID %>'; 
     $("#txtRemoveUser").on("blur", function() { 
      //Set value of hidden field to show panel after postback 
      $('#' + hdnFldId).val(true); 
     }); 


     if ($('#' + hdnFldId).val() == 'true') { 
      showPanel(); 
      //lets reset the value 
      $('#' + hdnFldId).val(false); 
     } 

     function showPanel() { 
      if ($('#MainContent_txtRemoveUser').val() != '') { 
       $('.panel-collapse').removeClass('collapse').addClass('in'); 
      } 
     } 
    }); 

Answer 2

您缺少类选择器以指定元素。它应该是：

$('.panel-collapse.collapse').removeClass('collapse'); 

Answer 3

在你的Jquery，你有一点点问题，您的选择：

$("#MainContent_txtRemoveUser").on("blur", function() 
{ 
    if ($('#MainContent_txtRemoveUser').val() != '') 
    { 
     $('.panel-collapse .collapse').removeClass('collapse'); 
     $(this).addClass('in'); 
    } 
}); 

你忘了类选择前的点;） 你可以阅读更多有关jQuery选择这里=> https://api.jquery.com/class-selector/

此外，您还可以优化你的jQuery代码：

$("#MainContent_txtRemoveUser").on("blur", function() 
{ 
    if ($(this).val()) // == if $(#MainContent_txtRemoveUser).val() != "" 
    { 
     $('.panel-collapse .collapse').removeClass('collapse'); 
     $(this).addClass('in'); 
    } 
}); 

您检查选择的功能（#MainContent_txtRemoveUser“）的值

您可以使用‘$（本）’再次调用它选择，在函数。 ^^

而且，不要忘记你可以在浏览器中使用断点检查你的javascript！

希望我帮你：P