在发送表单后，我尝试隐藏联系表单 7 的 wpcf7-mail-sent-ok 元素。然而，我得到了一些意想不到的结果，但我不确定为什么。
这是我在 WP 中的 footer.php 文件中的代码。
// Contact Form 7 mail sent...
document.addEventListener('wpcf7mailsent', function(event) {
$('.wpcf7-mail-sent-ok').delay(5000).fadeOut('slow').hide(0);
}, false);
这是应该发生的情况的示例。
$('.wpcf7-mail-sent-ok').delay(3000).fadeOut('slow').hide(0);
.wpcf7-response-output {
padding: 1rem;
background: #f00;
color: #fff;
border-radius: 0.8333rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">Thank you for your message. It has been sent.</div>
The Problem - It's actually executing the reverse, strangely enough. What I mean is, it's waiting 5 seconds, then fading in then the box just sits there indefinitely.
注意:我在控制台中没有收到任何错误。
任何帮助将不胜感激。
最佳答案
经过一番挖掘，发现 Jquery 在允许元素渲染之前就触发了，这导致了一些意外的结果。
我能够使用以下方法解决该问题；
// Contact Form 7 mail sent...
document.addEventListener('wpcf7mailsent', function(event) {
setTimeout(function() {
$('.wpcf7-mail-sent-ok').delay(3000).fadeOut('slow').hide(0);
}, 5000);
}, false);
Thanks for the assist guys.
关于javascript - CF7 5秒后隐藏 `.wpcf7-mail-sent-ok`，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56533702/