选择添加按钮时需要显示额外的文本输入，还需要删除字段 [英] need to display extra text inputs when selecting add button, also need to remove fields

问题描述

我有一个表格要求用户输入他们项目的结果。

I have a form that requires the user to input their project's outcome.

他们需要输入至少一个结果，并且每个结果都要求输入至少2个与之相关的措施。

They are required to input at least one outcome, and each outcome has a requirement of at least 2 measures associated with it.

所以我需要能够向用户显示初始结果字段，并且有两个与之关联的测量字段，并且能够添加更多衡量其相关结果的方法。

So I need the ability to present the user with the initial outcome field, with two measure fields associated with it, with the ability to add more measures to its related outcome.

我勾勒出了如果用户有两个结果会是什么样子。

I sketched up what it would look like if the user were to have two outcomes.

点缀行是每个按钮的动作。

The dotted lines are the actions of each button.

我想用jQuery完成这个，但我从来没有做过任何事情，只是根据什么来显示/隐藏字段用户点击。

I would like to accomplish this using jQuery, but I have never done anything more than just displaying/hiding a field based on what the user clicks.

感谢任何帮助。

总结一下，他们需要提供一个结果，每个结果至少有两个措施。

Just to sum it up, they are required to provide one outcome, each outcome has at least two measures.

编辑：开始在这里进行校对： http://jsfiddle.net/bkmorse/FW6s8/4/ - 但添加测量按钮无法正常工作。

Began proofing it here: http://jsfiddle.net/bkmorse/FW6s8/4/ - but the add measure button is not working properly.

推荐答案

这是我放在一起的东西：

Here is something I put together:

http://jsfiddle.net/jtbowden/XFsyh/

最棘手的部分，大部分代码是处理表单输入名称。

The trickiest part, and most of the code is dealing with form input names.

代码的主要部分取决于添加元素时克隆的非显示模板。这样可以更轻松地创建新元素，因为您只需修改模板。

The main part of the code depends on a non-displayed template which is cloned when elements are added. This makes it easier to create new elements, because you just have to modify the template.

更新：这是一个允许您使用的版本只要其他人存在，就删除第一个结果/措施，加上我清理了一些其他的东西（错误）：

Update: Here is a version that allows you to remove the first outcome/measure as long as others exist, plus I cleaned up some other things (bugs):

http://jsfiddle.net/jtbowden/XFsyh/4/

请注意使用 .live（） 。示例中的按钮不起作用，因为您在这些按钮存在之前分配处理程序一次。 .live（）将处理程序分配给DOM的根目录，以便稍后添加的任何元素也将具有正确的处理程序。

Note the use of .live(). The buttons in your example don't work because you are assigning handlers once, before those buttons exists. .live() assigns the handler to the root of the DOM, so that any elements added later will also have the correct handler.

以下是修正的原始版本，根据您的要求：

Here is the original version with fixes, as per you request:

http://jsfiddle.net/jtbowden/JTUkE/

如果你想要它动画：

http://jsfiddle.net/jtbowden / brBSa /

这篇关于选择添加按钮时需要显示额外的文本输入，还需要删除字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！