Question

我有一个按钮，在点击时通过jQuery显示一条消息。现在，消息立即消失，按钮再次返回。我想在再次显示按钮之前显示该消息一段时间。我是jQuery的新手，我尝试了一些选项，例如delay()和setTimeout()，但我们无法获得确切的脚本来实现它。

这是我现有的代码：

$('#id1').click(function() {
  $('#id2').html('<p>A code has been sent to your email</p>');
});

.ftl如下：

    <#if !(obj)?has_content>
    <div class="cls" id="id1">
      <a href="/link?email=${email}" id="id2">Send Token</a>
    </div>
   </#if>

您能告诉我有关实现这一目标的代码吗？

Answer 1

$('#div1').click(function() {
    setTimeout(function() {
        $('#div2').html('<p>A code has been sent to your email</p>');
    }, 1000);
});

Answer 2

您是否尝试将置于 setTimeout（）函数中？参考w3schools，

$('#div1').click(function() {
  setTimeout(function() {
   $('#div2').html('<p>A code has been sent to your email</p>');
  }, 3000 // 3000 is equivalent to 3 seconds. It's in MS.
 );
});

Answer 3

这将在3秒后隐藏div2

cm hx box

$('#div1').click(function() { 
    $('#div2').html('<p>A code has been sent to your email</p>');

我 setTimeout（function（）{ $（＆＃39;＃DIV2＆＃39;）HTML（）。 ZV }，3000）; }）;

Answer 4

检查它是否适合您。

＆＃13;

$(function() {
$('#div1').click(function() {
$('#div2').show();
$("#div1").hide();
setTimeout(
function() { $("#div2").fadeOut(1500); $("#div1").show(); }, 5000)
})
})

＆＃13;

.content
{
border: 2px solid Red;
color: #008000;
padding: 10px;
width: 400px;
font-family:Calibri;
font-size:16pt
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="button" id="div1" value="Show DIV" />
<div class="content" id="div2" class="" style="display:none;">
Hi, Welcome  Raj
It will disappear in 4 seconds!
</div>

＆＃13;

Answer 5

我假设你想在点击后隐藏按钮，并在消息消失后显示它。

$('#id1').click(function(event) { 
    var $btn = $(this);
    var $msg = $('#id2');

    $msg
        .html('<p>A code has been sent to your email</p>')
        .show(); // or you could use .fadeIn()

    // Remove this line if you don't want to hide the button.
    $btn.hide(); 

    setTimeout(function() {
       $msg.hide().html(''); // or you could use .fadeOut()

       // Remove this line if you did't hide the button above.
       $btn.show();
    }, 3000);

    event.preventDefault();
    return false;
});

如果您希望在展示和隐藏时产生效果，则只需将.show()和.hide()替换为.fadeIn()和.fadeOut()。

setTimeout(function() {
   // Send a callback function, which will be called after the 'fadeOut' animation.
   $msg.fadeOut(400, function() {
       $msg.html('');

       // Remove this line if you did't hide the button above.
       $btn.show();
   }).html('');
}, 3000);

<小时/> 的更新

如果您的HTML是这样的......

<div class="cls" id="id1"> <a href="/link?email=${email}" id="id2">Send Token</a> </div>

然后您将无法隐藏#id1，因为它也会隐藏#id2。

尝试这样的事情......

<a href="/link?email=${email}" class="cls" id="id1">Send Token</a> <div id="id2" style="display: none;" ></div>

<小时/> 更新2

如果您在尝试实施上述更新时页面中断，请尝试此操作...

<div class="cls" id="id1"> <a href="/link?email=${email}" >Send Token</a> </div>  <div id="id2" style="display: none;" ></div>

<小时/> 更新3（点击后阻止页面刷新）

请参阅我在最后几行中更新的点击事件......

$('#id1').click(function(event) { ... above code bla bla.. event.preventDefault(); return false; });

尝试此操作以防止页面刷新。但是，您必须使用点击事件中的ajax手动调用您的电子邮件服务。

var emailText = "someones@email.com"; $.ajax({ url: ("/link?email=" + emailText), type: "GET", success: function(data) { console.log("Email request sent."); }, error: function() { console.log("Some error occurred"); } });

Answer 6

您可以使用window.location.href在Javascript中重定向链接，并在3秒后调用它。看看这个jsfiddle。如果你有预期的行为，请告诉我。

在jQuery中延迟显示消息

6 个答案: