每个功能jQuery不起作用

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 total中的按钮时，它会给我现场价格的值。

因此，如果我单击第一个提交按钮，它给我的值为2，但是如果我单击第二个按钮之后，它的值不等于（2 + 3 = 5）

Answer 1

您应该使用class而不是id因为jquery id选择器（＃）仅返回一个元素

https://api.jquery.com/id-selector/

对于id选择器，jQuery使用JavaScript函数document.getElementById（），这非常高效。 当另一个选择器附加到id选择器（例如h2＃pageTitle）时，jQuery在将元素标识为匹配项之前执行附加检查。

以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）

不用单击按钮就.each （5）的原因是因为它正在执行.each而不需要您自己单击按钮。

为此，我对buttons和inputs使用了两个不同的classes ，因此它们需要以下内容：

<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>

更新的JSFIDDLE

每次点击都会继续将值添加到总数上，因为在点击次数总计达到（5）时，没有任何验证方法可以告诉点击停止

使用一个按钮进行更新

您甚至可以执行此操作，而不是只有两个按钮，而只有一个按钮可以遍历每个输入并求和。

例如：

带一个按钮的JSFIDDLE示例

使用两个按钮进行更新（相同的类名称和5的验证）

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

具有两个按钮和小验证的JSFIDDLE

每个功能jQuery不起作用

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-09-23 11:53:47

解决方案2
0 2015-09-23 11:56:44

更新

使用一个按钮进行更新

使用两个按钮进行更新（相同的类名称和5的验证）

每个功能jQuery不起作用

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-09-23 11:53:47

解决方案2 0 2015-09-23 11:56:44

更新

使用一个按钮进行更新

使用两个按钮进行更新（相同的类名称和5的验证）

解决方案1
1 已采纳 2015-09-23 11:53:47

解决方案2
0 2015-09-23 11:56:44