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的解决方案，因为可能有更多元素是兄弟姐妹。如果嵌套级别存在标记，则使用父级而不是父级函数。所以使用下面的代码：

＆＃13;

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

＆＃13;

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

3 个答案: