[英]multiple buttons with same form at a time
I have multiple buttons that has a same class. 我有多个具有相同班级的按钮。 When clicking the button, there's a form popups. 单击该按钮时,将弹出一个窗体。 how can I make it dynamic? 如何使它动态? so whenever I click a button not all form will popup. 因此,每当我单击按钮时,都不会弹出所有表单。
See sample code below. 请参见下面的示例代码。
$(".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>
up to your structure you can use $(this)
and .next()
根据您的结构,可以使用$(this)
和.next()
$(".plans-de-mesure-form-button").click(function(){
$(this).next(".evaluation-gratuite-form").fadeIn("slow");
});
to close the form 关闭表格
$('.Close_Button_Class').on('click',function(){
$(this).closest(".evaluation-gratuite-form").fadeOut("slow");
});
Try this way $(this).next(".evaluation-gratuite-form")
尝试这种方式$(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>
More Elegant solution will be that which is DOM independent because there can be more elements who are siblings. 更优雅的解决方案将是与DOM无关的解决方案,因为可以有更多元素是同级元素。 Use parents instead of parent function if a tag is present at nested levels. 如果标签位于嵌套级别,请使用父代而不是父代功能。 So use below code: 因此,使用以下代码:
$(".plans-de-mesure-form-button").click(function(){ $(this).parent('.listing').find(".evaluation-gratuite-form").fadeIn("slow"); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.