Javascript 显示增加和减少金额的总值

我不熟悉jQuery。我正在尝试增加和减少

上的值，单击按钮上的

。 现在我想在total

input

上显示三个输入的总和

以下是我尝试过的：

var cartButtons=$（'.cart加减'）。查找（'button'）；
$（cartButtons）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var target=$this.parent（）.data（'target'）；
变量目标=$（“#”+目标）；
var current=parseFloat（$（target.val（））；
if（$this.hasClass（'cart-plus-1'））
target.val（当前+1）；
否则{
（当前值<2）？空：target.val（当前值-1）；
}
});
正文{
宽度：500px；
保证金：0自动；
}
a{
文字装饰：无；
边缘底部：20px；
}
.购物车加减{
边缘顶部：20px；
}

增加/减少“金额”输入。
-
+
-
+
-
+
您需要迭代输入，并将这些输入的值添加到变量中。
然后将其设置为total input字段的输入值

  var total = 0;

  $('.cart-plus-minus input').each(function(){
    total += +this.value;
  });

  $("#total").val(total);


var cartButtons=$（'.cart加减'）。查找（'button'）；
$（cartButtons）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var target=$this.parent（）.data（'target'）；
变量目标=$（“#”+目标）；
var current=parseFloat（$（target.val（））；
if（$this.hasClass（'cart-plus-1'））
target.val（当前+1）；
否则{
（当前值<2）？空：target.val（当前值-1）；
}
var合计=0；
$（'.cart加减输入'）。每个（函数（）{
总计+=+此值；
});
$（“总计”）.val（总计）；
});
正文{
宽度：500px；
保证金：0自动；
}
a{
文字装饰：无；
边缘底部：20px；
}
.购物车加减{
边缘顶部：20px；
}

增加/减少“金额”输入。
-
+
-
+
-
+
参见下面的工作示例。基本上，您只需将
id
分配给total输入框（不需要，但更简单），然后在事件侦听器中，将所有三个框的总数相加，并将结果放入第一个输入框

有一点需要注意：


第三个增量框与第二个增量框具有相同的
id
和
data target
值，导致第三个框的按钮影响第二个框中的值（在下面的解决方案中修复）


var cartButtons=$（'.cart加减'）。查找（'button'）；
$（cartButtons）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var target=$this.parent（）.data（'target'）；
变量目标=$（“#”+目标）；
var current=parseFloat（$（target.val（））；
if（$this.hasClass（'cart-plus-1'））
target.val（当前+1）；
否则{
（当前值<2）？空：target.val（当前值-1）；
}
getTotal（）；
});
函数getTotal（）{
document.getElementById（'total'）.value=parseInt（document.getElementById（'amount-1'）.value）+parseInt（document.getElementById（'amount-2'）.value）+parseInt（document.getElementById（'amount-3'）.value）；
}
getTotal（）
正文{
宽度：500px；
保证金：0自动；
}
a{
文字装饰：无；
边缘底部：20px；
}
.购物车加减{
边缘顶部：20px；
}

增加/减少“金额”输入。
-
+
-
+
-
+
尝试使用
val（）
jQuery获取
输入值
值，然后使用
parseInt
将其转换为
int

堆栈片段


var cartButtons=$（'.cart加减'）。查找（'button'）；
var total=parseInt（$（“#amount-1”）.val（））+parseInt（$（“#amount-2”）.val（））+parseInt（$（“#amount-3”）.val（）；
$（“总计”）.val（总计）；
$（cartButtons）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var target=$this.parent（）.data（'target'）；
变量目标=$（“#”+目标）；
var current=parseFloat（$（target.val（））；
if（$this.hasClass（'cart-plus-1'））
target.val（当前+1）；
否则{
（当前值<2）？空：target.val（当前值-1）；
}
总计=parseInt（$（“#amount-1”）.val（））+parseInt（$（“#amount-2”）.val（））+parseInt（$（“#amount-3”）.val（）；
$（“总计”）.val（总计）；
});
正文{
宽度：500px；
保证金：0自动；
}
a{
文字装饰：无；
边缘底部：20px；
}
.购物车加减{
边缘顶部：20px；
}

增加/减少“金额”输入。
-
+
-
+
-
+
试试这个


var cartButtons=$（'.cart加减'）。查找（'button'）；
$（cartButtons）。在（'单击'）上，函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var target=$this.parent（）.data（'target'）；
变量目标=$（“#”+目标）；
var current=parseFloat（$（target.val（））；
var total=parseFloat（$（'#total'）.val（））
if（$this.hasClass（'cart-plus-1'））{
target.val（当前+1）；
$（'总计'）.val（总计+1）；
}
否则{
如果（当前>=2）{
target.val（当前为-1）；
$（#total'）.val（total-1）；
}
}
});
正文{
宽度：500px；
保证金：0自动；
}
a{
文字装饰：无；
边缘底部：20px；
}
.购物车加减{
边缘顶部：20px；
}

增加/减少“金额”输入。
-
+
-
+
-
+
您所说的总金额是什么意思？它是三个输入的总和吗？你想在总值上显示增加和减少的总值吗？“现在我想把总数放在一个输入中。这是我尝试过的”。这里没有人试图按你说的做。您所做的就是创建文本框。没有多少“尝试”。您已经演示了如何在文本框中输入值，以及如何从文本框中读取值。它基本上是一样的，只是你必须从所有3个文本框中提取数据并做一些基本的数学运算。是的@亚吉夫。三个输入的总和显示在总数上。您已经将每个总数放在一个输入中，因此代码将非常相似-如果您已经做了第一部分，我无法想象这会太困难。