单击按钮时显示 div Javascript

Posted 2023-05-08

【中文标题】单击按钮时显示 div Javascript

【英文标题】：Displaying a div when button is clicked Javascript

【发布时间】：2021-12-03 13:37:01

【问题描述】：

我的目标是在单击“保存”按钮时显示带有成功消息的 div。 不幸的是，我所做的只是在每次加载页面时显示此消息..

这是我的代码：

<div id="fadeDiv">
    <p>Content saved !</p>
</div>

$(document).ready(function () 
    $('#fadeDiv').fadeIn(1000);
    setTimeout(function ()  $('#fadeDiv').fadeOut(1000); , 1000);
);

我试过了

$('#saveBtn").click(...);

但是当我点击按钮时，即使我没有 Response.Redirect() 页面也会重新加载，因此我的 div 不会显示。

感谢您的帮助

【问题讨论】：

你能给我们看看你的saveBtn的html吗？还有$('#saveBtn").click(...) dosnt 工作。应该是这样的：$('#saveBtn").on('click',[function])

你的保存按钮类型=“提交”吗？如果是这样，你应该防止默认它

@JonasWeinhardt .click() 方法适用于静态内容。不过，查看 HTML 会有所帮助，特别是如果 button 在 form 内时

@Rory McCrossan 哦，我不知道。感谢您指出：D

@JonasWeinhardt 这是我的按钮的 html：<asp:Button ID="btnEnregistre" runat="server" CssClass="btn btn-success-reverse" Text="Enregistrer" OnClick="btnEnregistre_Click" CausesValidation="true" ValidationGroup="form" />

【参考方案1】：

此解决方案在开头隐藏按钮。

$("#saveBtn").click(function () 
    $('#fadeDiv').fadeIn(1000);
    setTimeout(function ()  $('#fadeDiv').fadeOut(1000); , 1000);
);

<div id="fadeDiv" style="display:none">
    <p>Content saved !</p>
</div>

<button id="saveBtn">
Save!
</button>

【讨论】：

这是假设按钮不在 form 中 - 这很可能是因为 OP 状态单击按钮会导致页面传输/重新加载

感谢您的回答，但它仍然对我不起作用...我尝试在其中放置一个简单的 alert() 但没有显示任何内容。 $('#btnEnregistre').click(function () alert('ALERT'); );

【参考方案2】：

请参考以下链接并尝试使用您自己的。

Click here

如果您需要任何帮助，请告诉我。

【参考方案3】：

为了重新创建您想要做的事情，我创建了一个带有隐藏 div 的 HTML，成功保存后，该消息将显示在带有红色边框的 div 中。请注意，按钮在 div 之外。

其次，我创建了一个简单的 javascript 函数，用于触发 div 的显示并隐藏保存按钮。

function ShowHideDiv() 
    //show div when button is clicked               
    document.getElementById("myDiv").style.display = "block";
    //hide save button after click
    document.getElementById("saveButton").style.display = "none";
                                    
    

<div id="myDiv" style="display: none; border-style: solid; border-width:thick; border-color:red;">
 <p> Hey..!! <br><br>Your Content saved!! :)</p>
</div>
<button onclick="ShowHideDiv()" id = "saveButton">Save Button</button>

我希望这是你想要达到的目标。

干杯！

【参考方案4】：

感谢大家的快速回答！ 我设法做到了！

所以我把我的按钮放在一个 asp UpdatePanel 中以避免当它被点击时，页面被重新加载。之后，我在单击按钮时调用的 C# 函数中添加了一个 RegisterStartupScript。最后，RegisterStartupScript 只是调用管理我的消息显示的 Javascript 函数。

代码如下：

HTML

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="saveBtn" runat="server" Text="Save" OnClick="saveBtn_Click"/>
    </ContentTemplate>
</asp:UpdatePanel>
<div id="fadeDiv" style="display: none">
    <p id="saveMsg">Content saved</p>
</div>

C#

protected void saveBtn_Click(object sender, EventArgs e)

    // ...
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "call", "displaySaveMsg();", true);

Javascript

function displaySaveMsg() 
    $('#fadeDiv').fadeIn(1000);
    setTimeout(function ()  $('#fadeDiv').fadeOut(1000); , 1000);

【参考方案5】：

您的问题有解决方案 1.这是我们的html

    <div id="fadeDiv">
      <p>Content saved !</p>
    </div>
   <button id="saveBtn">Show</button>

2.jQuery代码

$(document).ready(function()
     $("#fadeDiv").hide();
      $("#saveBtn").click(function()
        $("#fadeDiv").show();
      );
    );

问题解决方案的说明。 1.html结构和你的一样，解决办法在jquery代码里面。

A.这一行 $("#fadeDiv").hide();当我们第一次到达页面时隐藏 div。

B.当我们单击保存按钮时，此代码将运行 $("#saveBtn").click(function()

);.

C.最后一件事，这一行 $("#fadeDiv").show();将显示隐藏的 div。