如何显示一个元素，做其他事情，然后在一个点击事件中隐藏该元素？ [英] how to show an element, do something else and then hide that element in one click event?

问题描述

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

I'm using contact form 7. I have a form submit button, when i click it gif loader image shows up and then validation status message shows up along with gif image disappear.

在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 。基本上我想覆盖一个插件的代码，而不是直接修改它们。

But this code is not working as alerting $('div.wpcf7-display-none').css('display') is still showing "none", instead of "block". Basically i'm trying to overwrite a plugin's code , instead of modifying them directly.

如何隐藏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>

推荐答案

function -

You can nest the functions in the callbacks of the previous function -

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

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

Of course this is just speculation as we haven't seen your markup. What changes the display of div.wpcf7-display-none?

这篇关于如何显示一个元素，做其他事情，然后在一个点击事件中隐藏该元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！