Question

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

当我点击Button2时，它会在Label中显示一些文字。然后，如果我隐藏div所有它隐藏。然后，当我使div可见时，它显示div。但是标签中的文字是可见的，虽然我还没有点击按钮。我不希望Label显示任何文字。我可以通过使标签文本为空字符串来实现。我不想这样做。我想重新加载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";
}

Answer 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 fiddle：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;   
}

如何使用JQuery重新加载div？

1 个答案:

替代：