CF7 在 5 秒后隐藏 `.wpcf7-mail-sent-ok`

Question

我试图在发送表单后隐藏 Contact Form 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.

注意：我在控制台中没有收到任何错误。

如有任何帮助，我们将不胜感激。

Answer 1

一定要用JS吗，你可以通过CSS

完成同样的事情

.wpcf7 .wpcf7-form .wpcf7-mail-sent-ok { 
    display: none !important; 
}

Answer 2

所以经过一些挖掘，结果是 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.

CF7 在 5 秒后隐藏 `.wpcf7-mail-sent-ok`

CF7 hiding `.wpcf7-mail-sent-ok` after 5 seconds

javascript

wordpress

jquery

contact-form-7