Question

我正在使用联系表格7.我有一个表单提交按钮，当我点击它时，显示gif加载程序图像，然后显示验证状态消息以及gif图像消失。

在css中我正在使用.ajax-loader{display:none;}

在js中我正在使用

$('.wpcf7-submit').click(function(){
  $('.ajax-loader').show();

if('block' ==  $('div.wpcf7-display-none').css('display')){
         $('.ajax-loader').hide();
   }  
});

但此代码无法提醒$('div.wpcf7-display-none').css('display') 仍然显示“none”，而不是“block”。基本上我试图覆盖插件的代码，而不是直接修改它们。

如何隐藏gif图像？

这里是表单标记

<form>
//markup for different fields

//and here are the three main elements after clicking the submit button

<p>
<input type="submit" value="Make an appointment now" class="wpcf7-form-control wpcf7-submit btn btn-block btn-default">
<img class="ajax-loader" src="http://localhost/medical/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="display: inline-block; visibility: hidden;">
</p>

<div class="wpcf7-response-output wpcf7-display-none wpcf7-validation-errors" style="display: block;" role="alert">
Validation errors occurred. Please confirm the fields and submit it again.
</div>
</form>

Answer 1

您可以将函数嵌套在上一个函数的回调中 -

$('.wpcf7-submit').click(function(){
  $('.ajax-loader').show(function() {
      if('block' ==  $('div.wpcf7-display-none').css('display')){
         $('.ajax-loader').hide();
      }
  });  
});

当然，这只是猜测，因为我们还没有看到你的标记。是什么更改了div.wpcf7-display-none的显示？

如何显示元素，执行其他操作然后在一次单击事件中隐藏该元素？

1 个答案: