Question

我是Java的新手，他试图将一种可以计算输入的表格放在一起。我到目前为止已经得到了显示的总值，但是它显示为0，而不是每个具有输入的字段的总和。

我复制了几个示例，这似乎是效果最好的示例

$('.form-group').on('input','.prc',function() {
    var totalSum = 0;
    $('form-group .prc').each(function() {
        var inputVal = $(this).val();
        if($.isNumeric(inputVal)){
            totalSum += parseFloat(inputVal);
        }
    });
    $('#result').text(totalSum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">
    <label>Energy</label>
    <input type="number" class="form-control prc"/>
</div>
<div class="form-group">
    <label>Justice</label>
    <input type="number" class="form-control prc"/>
</div>
<div class="form-group">
    <label>Total</label>
    <output id="result" class="form-control prc"/>
</div>

预期结果：输入数字后应计算总和。并非所有字段都需要输入。总数必须等于100，而我还没有达到那部分。：）

Answer 1

您的问题是线路

$('form-group .prc').each(function() {

将其更改为

$('.form-group input.prc').each(function() {

表单组前面应该有一个“ .”，您应该选择input.prc。否则，您也将总数添加回自己。

$('.form-group').on('input','.prc',function(event) {
    var totalSum = 0;
    var currentInput = event.target;
                  
    $('.form-group input.prc').each(function() {
        var inputVal = $(this).val();
        if($.isNumeric(inputVal)){
            totalSum += parseFloat(inputVal);

            if (totalSum > 100) {
                totalSum -= currentInput.value;
                currentInput.value = "";                 
            }
        }

    });
    $('#result').text(totalSum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
    <label>Energy</label>
    <input type="number" class="form-control prc"/>
</div>
<div class="form-group">
    <label>Justice</label>
    <input type="number" class="form-control prc"/>
</div>
<div class="form-group">
    <label>Total</label>
    <output id="result" class="form-control prc"/>
</div>
<button id="submit-bn">submit</button>
</form>

计算js，html格式的输入文本

1 个答案: