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

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");
});

Answer 2

尝试这种方式$(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> 

Answer 3

更优雅的解决方案将是与DOM无关的解决方案，因为可以有更多元素是同级元素。 如果标签位于嵌套级别，请使用父代而不是父代功能。 因此，使用以下代码：

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