我喜欢这个HTML代码
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="stile.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form action="">
<div>
<div style="float:left; margin-right:3%">XXX</div>
<div>
<input type="text" name="price" id="price" value="2">
</div>
<div style="float:left; margin-right:3%">
<input type="button" name="button" id="button" value="button">
</div>
</div>
<div>
<div style="float:left; margin-right:3%">YYY</div>
<div>
<input type="text" name="price" id="price" value="3">
</div>
<div style="float:left; margin-right:3%">
<input type="button" name="button" id="button" value="button">
</div>
</div>
<div id="total"></div>
<script src="js/mine.js"></script>
</form>
</body>
</html>
和文件mine.js中的跟随js代码
$("#button").each(function() {
var sum = 0;
$('#price').each(function() {
sum += Number($(this).val());
});
$('#total').text(sum);
});
我喜欢这样，当我点击div id中的按钮时，它会给我字段价格的值。
因此，如果我点击第一个提交按钮，它会给我2值，但是如果我点击第二个按钮后它就不会做总和（2 + 3 = 5）
答案 0 :(得分：1)
您应该使用class而不是id，因为jquery id selector（＃）只返回一个元素
https://api.jquery.com/id-selector/
对于id选择器，jQuery使用JavaScript函数 document.getElementById（），效率极高。当另一个 selector附加到id选择器，例如h2＃pageTitle，jQuery 在将元素标识为a之前执行附加检查 匹配。
使用id选择器作为参数调用jQuery（）（或$（）） 返回一个包含零或一个集合的jQuery对象 DOM元素。
输入将是
<input type="text" name="price" class="price" value="2">
<input type="button" name="button" class="button" value="button">
在total的情况下，你可以保留id，就像你有一个最终总数
所以你的代码就是这样的
$(".button").each(function() {
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
$('#total').text(sum);
});
更新：
如果您使用此代码并单击第一个按钮，它将给出2，然后另一个给出5.您可以尝试禁用click处理程序以防止再次添加。
$(document).on("click", ".button", function()
{
var sum = Number($('#total').text());
sum += Number($(this).closest("div").parent().find('.price').val());
$('#total').text(sum);
});
附录：每按一次按钮增加的数量输入
<div>
<input type="text" name="quantity" class="quantity" value="0">
<input type="button" class="add-quantity">
</div>
$(document).on("click", ".add-quantity", function()
{
var input = $(this).closest("div").find(".quantity");
var currentVal = parseInt(input.val());
$(input).val(currentVal+1);
});
答案 1 :(得分：0)
所以看看你的代码，你得到了以下内容：
<input type="button" name="button" id="button" value="button"></div>
<div><input type="text" name="price" id="price" value="2"></div>
<input type="button" name="button" id="button" value="button"></div>
<div><input type="text" name="price" id="price" value="3"></div>
您已将button和id设置为ID的两倍，并且您应该拥有唯一的id，因此当您检查每个元素时，请使用class=而不是id=。
因此，如果您要进行更改，它们将如下所示：
<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="2"></div>
<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="3"></div>
然后，您将使用$('.button')和$('.price')代替$('#button')和$('#price')作为JQuery中的选择器。
我已经把你的小提琴更新了。
检查以下内容：
阅读完评论后，我已经更新了我的jsfiddle，您现在可以点击两个按钮，然后将答案加到（5）
在没有点击按钮的情况下直接加起来（5）的原因是因为它正在执行.each而不是你必须自己点击按钮。
为了做到这一点，我为classes和buttons使用了两个不同的inputs，所以他们想要以下内容：
<input type="button" name="button" class="button" value="button"></div>
<div><input type="text" name="price" class="price" value="2"></div>
<input type="button" name="button" class="button1" value="button"></div>
<div><input type="text" name="price" class="price1" value="3"></div>
每次点击都会继续将值添加到总数中，因为一旦添加到（5）
，就没有验证可以告诉点击停止你甚至可以这样做，而不是有两个按钮，你可以只有一个按钮，它通过每个输入并累加总数。
例如：
JSFIDDLE EXAMPLE WITH ONE BUTTON
因此，在以下更新（示例）中，它将向您展示如何为class names和buttons使用相同的inputs获取两个值。它还将向您展示如何添加少量验证以在您拥有5时停止累加。因此您不能超过5（根据您的喜好更改它）。