jquery在submit表单上搜索相应的div和隐藏表单

Question

我在提交的同一页面中有多个表单，我想在表单提交后隐藏表单，并显示相应表单的链接下面是html，我对所有表单都有相同的类名以及submit类。

<div id="wpcf7-f63-p1-o1">
<form name="" class="wpcf7-form" action="" method = "post"> 
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
<input type="submit" value="Send" class="but" />
 </form>
</div>
<div id="wpcf7-f63-p1-o2">
 <form name="" class="" action="" method = "post"> 
<input type="text" name="your-name" value="" size="40" />
<input type="text" name="email" value="" size="40" />
 <input type="submit" value="Send" class="but" />
 </form>
</div>

我试过下面的代码

<script> 
jQuery(".wpcf7-form").submit(function() 
{ 
jQuery("^wpcf7-f63-p1-").hide(); 
});
</script>'; 

Answer 1

在您的示例中键入：
jQuery("^wpcf7-f63-p1-").hide();
我认为应该是：
jQuery("#wpcf7-f63-p1-o1").hide();

Answer 2

在表单提交时使用此选项

 $('input[type="submit"]').click(function() {
      $form = $(this).parent();
      $('<p><a href="#">link to form</a></p>').insertBefore($form);
      $form.hide();
    });

Answer 3

您正在寻找jquery .find()吗？

你可以这样做：

  $('form').submit(function(){
    $(this).find('.myForm').hide();
    $(this).find('.link').show();
  }

.link {
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="" class="" action="" method = "post"> 
  <div class="myForm">
    <input type="text" name="your-name" value="" size="40" />
    <input type="text" name="email" value="" size="40" />
    <input type="submit" value="Send" class="but" />
  </div>
  <a class="link" href="#">Link</a>
</form>

Answer 4

jquery选择器出现错误，请将js更改为：

jQuery(".wpcf7-form").submit(function() 
{ 
jQuery("[id^='wpcf7-f63-p1-']").hide() 
return false;
});

工作jsfiddle代码

注：你可能需要删除return false，我添加它是为了看到提交后元素消失