Question

我有一个asp.net webfore应用程序，在页面上我有一个手风琴，并且它有一些字段。在第一个asp：textbox上它有onclick，因为它检查我的数据库以查看用户是否存在。如果他们做了asp：那么就会显示标签。

我遇到的问题是，当我点击外面或标出这个字段时，我的手风琴关闭，我需要它保持开放。虽然我的字段有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选择器的更多信息=＆gt; 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＆＃34;）

您可以使用＆＃39; $（this）＆＃39;选择器在函数中再次调用它。 ^^

并且，不要忘记您可以在浏览器中使用断点来检查您的JavaScript！

希望我能帮到你：p

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

3 个答案: