使用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