javascript - 一次具有相同形式的多个按钮

Question

我有多个具有相同类的按钮。单击按钮时，会弹出一个表单。我怎样才能使它动态？所以每当我点击一个按钮时，并不是所有的表单都会弹出。

请参阅下面的示例代码。

$(".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>

Answer 1

根据您的结构，您可以使用 $(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");
});