Question

我喜欢这个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）

Answer 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);
});

Answer 2

所以看看你的代码，你得到了以下内容：

<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

的更新

阅读完评论后，我已经更新了我的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>

UPDATED JSFIDDLE

每次点击都会继续将值添加到总数中，因为一旦添加到（5）
，就没有验证可以告诉点击停止
使用一个按钮更新

你甚至可以这样做，而不是有两个按钮，你可以只有一个按钮，它通过每个输入并累加总数。

例如：

JSFIDDLE EXAMPLE WITH ONE BUTTON

使用两个按钮更新（相同的班级名称和5个验证）

因此，在以下更新（示例）中，它将向您展示如何为class names和buttons使用相同的inputs获取两个值。它还将向您展示如何添加少量验证以在您拥有5时停止累加。因此您不能超过5（根据您的喜好更改它）。

JSFIDDLE WITH TWO BUTTONS AND LITTLE VALIDATION

每个函数jquery都不起作用

2 个答案:

的更新

使用一个按钮更新

使用两个按钮更新（相同的班级名称和5个验证）