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

Question

我有一个 asp.net webfore 应用程序，在页面上我有一个手风琴，并且它有一些字段。在第一个 asp:textbox 上，它有一个 onclick，因为它检查我的数据库以查看用户是否存在。如果他们执行 asp:Label 则会显示。

我遇到的问题是，当我在外部单击或标记该字段时，我的手风琴关闭，我需要它保持打开状态。我认为即使我的字段有onclick 也可以通过 JQuery 执行此操作，或者我是否需要将其添加到我的代码后面？

在我看来我尝试过

$("#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")

您可以在函数中使用 '$(this)' 选择器再次调用它。 ^^

而且，别忘了您可以在浏览器中使用断点来检查您的 javascript！

希望能帮到你：p