[英]Hide multiple forms on one page and open them with specific links
I am creating a page and and it has multiple forms on each page. 我正在创建一个页面,并且每个页面上都有多种形式。 The forms are hidden but there is a link to each form. 表单是隐藏的,但是每个表单都有一个链接。 When the user clicks the link with the associated form than that form pops open in a lightbox, using colorbox.js. 当用户单击具有关联表单的链接时,该表单将使用colorbox.js在lightbox中弹出。 I have it working when only one form is on the page but I don't know how to create a script that works for multiple forms on one page. 当页面上只有一种表单时,我可以使用它,但是我不知道如何在一个页面上创建适用于多种表单的脚本。 My script is: 我的脚本是:
<script>
jQuery(document).ready(function() {
$(".myForm").hide();
$(".link_to_form").click(function() {
$(".myForm").show();
});
$(".link_to_form").colorbox({
width: "50%",
inline: true,
opacity: ".5",
href: ".myForm",
onClosed: function() {
$(".myForm").hide();
}
});
});
</script>
The link that the user clicks on has a class of "link_to_form" and the actual form is in a div with the class of "myForm". 用户单击的链接具有“ link_to_form”类,而实际的表单位于具有“ myForm”类的div中。 Each form also has a specific id associated with it. 每个表单还具有与之关联的特定ID。 So when a user clicks on the "register" form the form associated with that needs to pop up. 因此,当用户单击“注册”表单时,需要弹出与之关联的表单。 Right now, if the user clicks on a link to any form all of the forms open in a lightbox. 现在,如果用户单击任何表单的链接,则所有表单都将在灯箱中打开。
Essentially, you are binding a click event which calls show() on all .myForm matches found in the DOM. 本质上,您绑定了一个click事件,该事件在DOM中找到的所有.myForm匹配项上都调用show()。 What you're really trying to do is bind an event to all .link_to_form matches in the DOM, and have the click event only open the one that is relevant to the click. 您真正想做的是将事件绑定到DOM中的所有.link_to_form匹配项,并使click事件仅打开与点击相关的事件。
A good way to do this would be like this: 一个很好的方法是这样的:
<div class="form_1">
<a href="#" id="form_open_button">Open Form</a>
<form class="my_form_class'>
</form>
</div>
<div class="form_2">
<a href="#" id="form_open_button">Open Form</a>
<form class="my_form_class'>
</form>
</div>
$('.form_open_button').click(
function() {
$(this).next().toggle();
});
But you have to be sure to keep your forms IMMEDIATELY after the Anchor. 但是您必须确保在锚定之后立即保留表格。 If they aren't immediate, change next() to: 如果它们不是立即的,请将next()更改为:
$(this).next('.my_form_class').toggle()
$(".link_to_form").click(function() {
$(this).prev(".myForm").show();
});
You can add a data- attribute to the link so it looks like 您可以将data-属性添加到链接,以便它看起来像
<a href='#' class="formLinks" data-form-id="form1" id="lnk_1">show</a>
<form id="form1"></form>
and then 接着
your script would be 您的脚本将是
$('.formLinks').click(function(){
var formid =$(this).data('form-id');
$('#'+formid).show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.