Javascript 复制带有链接输入字段的列表

我是一个javascript高手。我试图复制一个列表，其中每个选项都有输入字段。不过，到目前为止，复制列表还没有显示相关的输入字段。我还想对每个有数据的字段求和

$（文档）.ready（函数（）{
$（“#btn副本”）。单击（函数（）{
var target=$（this）.closest（“.revenus”）；
target.clone（true，true）.appendTo（target.parent（））；
});
});
$（文档）.ready（函数（）{
切换字段（）；
$（“#revenu type”）.change（函数（）{
切换字段（）；
切换字段2（）；
});
});
函数toggleFields（）{
如果（$（“#revenu类型”）.val（）=“选项1”）
$（“#选项a”）.show（）；
其他的
$（“#选项-a”）.hide（）；
如果（$（“#revenu类型”）.val（）=“选项2”）
$（“#选项b”）.show（）；
其他的
$（“#选项b”）.hide（）；
如果（$（“#revenu类型”）.val（）=“选项3”）
$（“#选项c”）.show（）；
其他的
$（“#选项c”）.hide（）；
如果（$（“#revenu类型”）.val（）=“选项4”）
$（“#选项-d”）.show（）；
其他的
$（“#选项-d”）.hide（）；
}

选择类型

收入：
阿朱恩·奥特雷·雷弗努
Revenu 1
Revenu 2
Revenu 3
Revenu 4

备选案文1-a

备选案文1-b

选择2

选择3

选择4

当您使用

$("#option-a")...

它将只找到第一个ID，因为ID必须是唯一的

因此，首先要做的是将所有

id=

更改为

class=

（并更改相应的选择器）

您需要在当前

.revenus

中找到与当前

revenu类型相关的。您可以通过将
this
传递到
toggleFields
-将
this
稍微更改为
$（this）.closest（.revenus”）
来传递外部包装

在此基础上，您可以使用：

wrapper.find(".option-a")... 

获取包装器中的项目

btn copy click事件将被克隆，因此虽然这应该使用类和事件委派
$（“文档”）。在（“click”、“.btn copy”…
上，它仍将与包括事件的克隆一起工作

在不更改太多现有代码的情况下（例如使用
.toggle（bool）
而不是
if（bool）…show else..hide
），这将提供：


$（文档）.ready（函数（）{
$（“#btn副本”）。单击（函数（）{
var target=$（this）.closest（“.revenus”）；
target.clone（true，true）.appendTo（target.parent（））；
});
});
$（文档）.ready（函数（）{
切换字段（$（“.revenus”）.first（）；
$（“.revenu类型”）.change（函数（）{
toggleFields（$（this）.closest（“.revenus”）；
//切换字段2（）；
});
});
函数切换字段（包装器）{
if（wrapper.find（“.revenu type”）.val（）=“option-1”）
wrapper.find（“.option-a”）.show（）；
其他的
wrapper.find（“.option-a”）.hide（）；
if（wrapper.find（“.revenu type”）.val（）=“option-2”）
wrapper.find（“.option-b”）.show（）；
其他的
wrapper.find（“.option-b”）.hide（）；
if（wrapper.find（“.revenu type”）.val（）=“option-3”）
wrapper.find（“.option-c”）.show（）；
其他的
wrapper.find（“.option-c”）.hide（）；
if（wrapper.find（“.revenu type”）.val（）=“option-4”）
wrapper.find（“.option-d”）.show（）；
其他的
wrapper.find（“.option-d”）.hide（）；
}

选择类型

收入：
阿朱恩·奥特雷·雷弗努
Revenu 1
Revenu 2
Revenu 3
Revenu 4


备选案文1-a


备选案文1-b


选择2


选择3


选择4



使用
id
s将阻止脚本正常工作。请记住
id
s必须是唯一的。克隆内容后，所有id都将被复制。注意，还有第二个可选的上下文参数。因此，所有
查找
s都可以缩短为：
$（选择器，包装器）
。事实上，如果您提供上下文参数，它仍然可以使用重复的ID，因为jQuery不会查看上下文元素之外的内容。这是错误的，但它可以工作。如果不这样做，那么很遗憾，会有这么多站点崩溃：）。快乐编码@tao是的，我使用了
包装器。查找
，因为它通常比
$（选择器，包装器）
更清晰/更容易阅读。关于
$（“#id”，包装器）的好观点和一个好的技巧，但可能不是好的实践：）非常感谢您的回答！我花了太多时间试图解决这个问题。另外，如果可以的话，我还有一个问题。是否有方法在复制后删除右下一个选项中的上一个choosen选项。我的意思是，如果我选择例如revenu 3，然后单击add，我将只找到Revenue 1、2和4等等？如果这回答了您最初的问题，请接受它。我建议你在后续问题中再问一个SO问题，你很可能会从一个新问题中得到一个/多个回答，而不是从对一个已回答问题的评论中得到。好的，我会这样做，谢谢你的建议。