一次使用多个相同形式的按钮

multiple buttons with same form at a time

本文关键字：按钮 一次      更新时间：2023-09-26

我有多个按钮具有相同的类。单击按钮时，会弹出一个表单。如何使其具有动态性？所以每当我点击一个按钮时，并不是所有的表单都会弹出。

请参阅下面的示例代码。

$(".plans-de-mesure-form-button").click(function(){
  $(".evaluation-gratuite-form").fadeIn("slow");
});
   
a.plans-de-mesure-form-button {
    cursor:pointer;
 }
.evaluation-gratuite-form {
  display:none;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
   <a class="plans-de-mesure-form-button">Evaluation</a>
  <div class="evaluation-gratuite-form">
  <form>
   <input type="radio" name="sex" value="male" checked>Male
   <br>
   <input type="radio" name="sex" value="female">Female
   </form>
 </div>
</div>
<div class="listing">
   <a class="plans-de-mesure-form-button">Evaluation</a>
  <div class="evaluation-gratuite-form">
  <form>
   <input type="radio" name="sex" value="male" checked>Male
   <br>
   <input type="radio" name="sex" value="female">Female
   </form>
 </div>
</div>

根据您的结构，您可以使用$(this)和.next()

$(".plans-de-mesure-form-button").click(function(){
  $(this).next(".evaluation-gratuite-form").fadeIn("slow");
});

关闭表单

$('.Close_Button_Class').on('click',function(){
    $(this).closest(".evaluation-gratuite-form").fadeOut("slow");
});

尝试这种方式$(this).next(".evaluation-gratuite-form")

$(".plans-de-mesure-form-button").click(function(){
  $(this).next(".evaluation-gratuite-form").fadeIn("slow");
});
   
a.plans-de-mesure-form-button {
    cursor:pointer;
 }
.evaluation-gratuite-form {
  display:none;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
   <a class="plans-de-mesure-form-button">Evaluation</a>
  <div class="evaluation-gratuite-form">
  <form>
   <input type="radio" name="sex" value="male" checked>Male
   <br>
   <input type="radio" name="sex" value="female">Female
   </form>
 </div>
</div>
<div class="listing">
   <a class="plans-de-mesure-form-button">Evaluation</a>
  <div class="evaluation-gratuite-form">
  <form>
   <input type="radio" name="sex" value="male" checked>Male
   <br>
   <input type="radio" name="sex" value="female">Female
   </form>
 </div>
</div>

更优雅的解决方案将是与DOM无关的，因为可以有更多的元素是兄弟元素。如果标记存在于嵌套级别，请使用父函数而不是父函数。所以使用以下代码：

$(".plans-de-mesure-form-button").click(function(){
  $(this).parent('.listing').find(".evaluation-gratuite-form").fadeIn("slow");
});

相关文章：