同時具有相同表單的多個按鈕

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