如何使用 JQuery 重新加载 div？答案

【问题标题】：how to reload the div using JQuery?如何使用 JQuery 重新加载 div？
【发布时间】：2014-03-01 14:41:19
【问题描述】：

Page 中有两个按钮，btnCall 按钮隐藏了 hideDiv。和 Button1 显示 hideDiv。现在在 div 里面有一个按钮 Button2 显示一些文本。

当我单击 Button2 时，它会在标签中显示一些文本。然后，如果我隐藏所有 div 隐藏。然后，当我使 div 可见时，它会显示 div。但是标签中的文本是可见的，虽然我还没有点击按钮。我不希望标签显示任何文本。我可以通过将标签文本设为空字符串来做到这一点。我不想那样做。我想重新加载 div 以便标签中不显示任何内容，除非我单击 Button2。

我该怎么做？

我的 aspx 代码

<form id="form1" runat="server">
    <asp:Button ID="btnCall" runat="server" Text="Call1" OnClick="btnCall_Click" />

    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button2" />

    <div class="hideDiv">
        <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
</form>

后面的代码

protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnCall_Click(object sender, EventArgs e)
{
    StringBuilder strScript = new StringBuilder();

    strScript.Append("$(document).ready(function(){");
    strScript.Append("$(\".hideDiv\").hide();");
    strScript.Append("});");

    Page.ClientScript.RegisterStartupScript(this.GetType(), "Script", strScript.ToString(), true);
}
protected void Button1_Click(object sender, EventArgs e)
{

    StringBuilder strScript = new StringBuilder();
    strScript.Append("$(document).ready(function(){");
    strScript.Append("$(\".hideDiv\").show();");
    strScript.Append("});");

    Page.ClientScript.RegisterStartupScript(this.GetType(), "Script", strScript.ToString(), true);
}
protected void Button2_Click(object sender, EventArgs e)
{
       Label1.Text = "Some Text";
}

【问题讨论】：

看起来你在服务器端做的事情应该在客户端发生。如果使用按钮的 OnClientClick 事件并从 JavaScript 返回 false，则可以直接执行 JavaScript 函数而不会导致回发。
mason 在服务器端怎么做？
我想你误解了我的意思。您不需要在服务器端发生这种情况，因为它不需要服务器交互。尝试从服务器端进行操作只会使事情变得不必要地复杂化。尝试纯粹在客户端进行。

标签： javascript jquery asp.net

【解决方案1】：

您需要某种“重置”功能。而且你需要把所有东西都写在客户端上。

类似这样的：

<div id="content">
    <input type="button" id="btntoggle" value="show"/>
    <br/>
    <div id="hideDiv">
        <input type="button" id="btnshow" value="show text"/>
        <br/>
        <label id="text">Some text</label>
    </div>    
</div>

Js：

$(function(){
    reset();
    $('#btntoggle').click(function(){
        $('#hideDiv').toggle();
        if($(this).val() == 'show')
            $(this).val('hide');                       
        else{
            $(this).val('show');
            reset();
        }
    });

    $('#btnshow').click(function(){
        $('#text').show();
    });

    function reset(){
        $('#hideDiv').hide();
        $('#text').hide();            
    }

});

Js 小提琴：http://jsfiddle.net/9nkFf/

替代方案：

您可以从服务器端做任何事情。我开始意识到这一定是你想要的。但是您仍然需要在服务器端使用某种“重置”逻辑。为此，请考虑将hideDiv 设置为服务器控件——最好是Panel；您可以切换其可见性。

假设你的 aspx 看起来像这样：

<form id="form1" runat="server">
    <asp:Button ID="btnCall" runat="server" Text="Call1" OnClick="btnCall_Click" />

    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button2" />

    <asp:Panel id="hideDiv" runat="server" Visible="false">
        <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </asp:Panel>
</form>

后面的代码看起来会简单得多：

protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnCall_Click(object sender, EventArgs e)
{
    reset();
}
protected void Button1_Click(object sender, EventArgs e)
{
    hideDiv.Visible = true;    
}
protected void Button2_Click(object sender, EventArgs e)
{
    Label1.Text = "Some Text";
    Label1.Visible = true;
} 

void reset()
{
    Label1.Visible = hideDiv.Visible = false;   
}

【讨论】：