Javascript - 相同元素的两个实例

Question

我正在尝试用Javascript写一个贷款计算器。

您可以在此处查看：http://codepen.io/saltcod/pen/vHrfc

事情很顺利，除非我点击尝试并将第二个计算器实例添加到页面（通过+按钮）。当我这样做时，两个计算器不能独立工作。

如何让页面上的所有计算器独立运行？

感谢所有能够指出我正确方向的人。

特里

Answer 1

首先，不要使用id属性，除非它们每次都用于标识相同的元素。由于您克隆了相同的元素，并且由于密钥可以在这些元素中的任何一个上发生，因此您可以使用class代替。

另一件事是，您只为原始计算器中的元素附加了一个keyup处理程序。一旦你克隆它，那么新的计算器没有附加处理程序。相反，你可以使用委托

$(document).on("keyup", selectors, handler)

在处理程序函数中，您可以添加

group = $(this).parents(".loan.group")

并且所有选择器都应该有group作为范围，例如：

... years = +$('.years',group).val(),代替... years = +$('.years').val(),

here is an improved version of your calculator, I hope this helps