Html jQuery配方数量计算器

我想为食谱创建一个计算器，根据人数乘以数量。当前脚本进行了一些计算，并用数量更新了跨度，但它产生了一些非常奇怪的结果

第一个字段定义人数（配方中的标准4人）

下一个字段包含某物的数量（4人的标准数量）：

我怀疑一个问题是存在多次的类“数量”。我曾尝试使用.each（）从每个跨度数量类中获取有效值，但这根本不起作用

jQuery（文档）.ready（函数（$）{
$（“#人”）.change（function（）{
$people=$（this.val（）；
$quantity=parseFloat（$（“.quantity”）.text（））；
$（“.quantity”）.html（$people*$quantity）；
});
});

4件东西

200克黄油

500毫升牛奶
你是说这个吗


$（函数（）{
$（“#人”）。关于（“输入”，函数（）{
const people=+$（this.val（）；
const base=+$（this.data（“ppl”）；
$（“.quantity”）.text（函数（）{
返回人员？（$（this）.data（“数量”）*（人员/基数））.toFixed（0）：0
});
});
});

4件东西

200克黄油

500毫升牛奶
“我曾试图用.each（）从每一个span quantity类中获得有效值，但那根本不起作用。”-添加这种方法，并解释“不起作用”的原因，因为这句话完全没有用->->是的，太好了！没有“数据数量”属性，有没有办法做到这一点？你可以在一个对象中有所有的倒数和基值。@claudio是的，请看我的答案。它只使用HTML，不过请注意，它被认为是“笨重的”。这个答案可以说更好！谢谢你们！我可以用数据量来解决这个问题。但是为了使配方不太咸，我只调整了：：-）
returnparsefloat（（$（this.data（“qty”）/base*people.toFixed（2））