Question

我有一些带有“absclass”类的动态输入隐藏字段。我有两个数字和这些字段中的字符。我想在javascript中得到唯一数字的总和。我写的如下，那是
不工作。

  $(document).ready(function() {
        $('#btn').live('click', function(e) {
            e.preventDefault();
            var sum = 0;
            $('.absclass').each(function() {
                sum += Number($(this).val());
            });
            $("#sum").html(sum); 
        });                              
    });

请告诉我它为什么不起作用？

编辑：HTML代码

<td><input type="hidden" class="absclass" id="txtsp<?php echo $p; ?>" value=""/></td>

下面是脚本。在这个按钮上单击我将值传递给隐藏字段，也是
同时获得他们的总和。所以只有值传递到字段，但当我去

第二次点击然后即将到来。

        <script>
    var arr = new Array();
    $(document).ready(function() {
        $('#btn').on('click', function(e) {
            e.preventDefault();
            var txt1 = $('#txt1').val();
            var txt2 = $('#txt2').val();
            var txt3 = $('#txt3').val();
            var txt4 = $('#txt4').val();
            var txt5 = $('#txt5').val();
            var txt6 = $('#txt6').val();
            var textbox1 = $('#textbox1').val();
            var textbox2 = $('#textbox2').val();
            var textbox3 = $('#textbox3').val();
            var textbox4 = $('#textbox4').val();
            var textbox5 = $('#textbox5').val();
            var textbox6 = $('#textbox6').val();
            $.post("matchanswers.php", {"txt1": txt1, "txt2": txt2, "txt3": txt3, "txt4": txt4, "txt5": txt5, "txt6": txt6, "textbox1": textbox1, "textbox2": textbox2, "textbox3": textbox3, "textbox4": textbox4, "textbox5": textbox5, "textbox6": textbox6}, function(data) {
                var obj = $.parseJSON(data);
          <?php for ($k = 0; $k < 6; $k++) { ?>
                    $('#txtspan<?php echo $k; ?>').html(obj[<?php echo $k; ?>]);
                    $('#txtsp<?php echo $k; ?>').val(obj[<?php echo $k; ?>]);
//                        $(".hide").css( "display", "block");
//                        $(".answertext").css( "display", "none");
            <?php } ?>
            });
            var sum = 0;
            $('.absclass').each(function() {
                var val = Number($(this).val());
                if (!isNaN(val)) {
                    sum += val;
                }
            });
            $("#sum").html(sum);
        });
             });
       </script>

Answer 1

不推荐使用.live（）方法（jQuery 1.7）。请改用.on（）。

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<form>
<input type="button" value="btn" id="btn">
<input type="hidden" value="1" class="absclass">
<input type="hidden" value="2" class="absclass">
<input type="hidden" value="3" class="absclass">
<input type="hidden" value="4" class="absclass">
<input type="hidden" value="5" class="absclass">    
</form>
<div>Total: <span id="sum"></span></div>    
<script>
$(document).ready(function() {
    $('#btn').on('click', function(e) {
        e.preventDefault();
        var sum = 0;
        $('.absclass').each(function() {
            sum += Number($(this).val());
        });
        $("#sum").html(sum); 
    });                              
});    
</script>
</body>
</html>

Answer 2

如果这些字段中的每一个都包含一个值（数字加字符，我假设您可以使用parseInt获取数值：

$(document).ready(function() {
        $('#btn').on('click', function(e) {
            e.preventDefault();
   var sum = 0;
            $('.absclass').each(function() {
                sum += parseInt($(this).val());
            });
            $("#sum").html(sum); 
        });                              
    });

Answer 3

您需要将值解析为int。然后，您可以检查该值是否为数字，并将其添加到总和（如果是）（在您的每个内部）：

var val = parseInt($(this).val());
if(!isNaN(val)){
    sum += val;
}

编辑：在看到您使用$ .post填充数据后，请确保代码我位于此函数的回调中（因为只有在那里您可以确定数据是填写，你可以开始赚钱了。：

$.post("matchanswers.php", {"txt1": txt1, ...}, 
    function(data) {
        var obj = $.parseJSON(data);
        <?php for ($k = 0; $k < 6; $k++) { ?>
             $('#txtspan<?php echo $k; ?>').html(obj[<?php echo $k; ?>]);
             $('#txtsp<?php echo $k; ?>').val(obj[<?php echo $k; ?>]);
        <?php } ?>
        var sum = 0;
        $('.absclass').each(function() {
            var val = parseInt($(this).val());
            if (!isNaN(val)) {
                sum += val;
            }
        });
        $("#sum").html(sum);
    }
);

Answer 4

这是一个工作小提琴：DEMO

<input type="button" id="btn" value="ok">
 <input type="hidden" class="absclass" value="1"/>
<input type="hidden" class="absclass" value="2"> 
<input type="hidden" class="absclass" value="3">  
<div id="sum"></div>

JS：

 $(document).ready(function() {
        $('#btn').live('click', function(e) {
            e.preventDefault();
   var sum = 0;
            $('.absclass').each(function() {
                  if(!isNaN(parseFloat($(this).val()))) sum += Number($(this).val());
            });
            $("#sum").html(sum); 
        });                              
    });

你的jquery版本是什么？因为live()已被弃用

Answer 5

尝试这样的事情

  $('#btn').on('click', function(e) {
        e.preventDefault();
        var sum = 0;
        $('.absclass').each(function() {
            var num = Number(this.value);
            if(!isNaN(num)){
                sum += num;
            }
        });
        $("#sum").html(sum); 
    });                              
});

Answer 6

移动你的

var sum = 0;
$('.absclass').each(function() {
    var val = Number($(this).val());
    if (!isNaN(val)) {
        sum += val;
    }
});
$("#sum").html(sum);

进入像这样的回调

$.post("matchanswers.php", {"txt1": txt1, "txt2": txt2, "txt3": txt3, "txt4": txt4, "txt5": txt5, "txt6": txt6, "textbox1": textbox1, "textbox2": textbox2, "textbox3": textbox3, "textbox4": textbox4, "textbox5": textbox5, "textbox6": textbox6}, 
    function(data) {
        var obj = $.parseJSON(data);
        for (var k = 1; k < 7; k++) { 
            $('#txtspan'+k).html(obj[k]);
            $('#txtsp'+k).val(obj[k]);
        }
        var sum = 0;
        $('.absclass').each(function() {
            var val = Number($(this).val());
            if (!isNaN(val)) {
                sum += val;
            }
        });
        $("#sum").html(sum);
    }
);

在您的代码中，您在从服务器获得答案之前尝试计算总和，并为隐藏字段设置值还可以查看有关$.post功能的更多信息，它会发送异步请求

如何在隐藏字段的javascript中获取数字总和？

6 个答案: