Question

我有一个非常大的表单，它有输入和普通div与类＆＃34; calcsum＆＃34;。输入由用户填充，div是计算结果，由输入按钮和click（）函数完成。

我现在想要总结所有输入和div，当它们有价值时。但我不能让脚本读取所有值。

$('#calculate').click(function() {
    var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){;
        console.log(Number($(this).val()));
        amount_sum += Number($(this).val());
    });
    $('#amount_worth').html(amount_sum);
});

这适用于普通输入字段，但忽略div中的值。我用val（）尝试了其他几种方法，但都没有用。我不明白为什么忽略div中的值。请帮忙...... :(

HTML中的示例：

<tr>
    <td colspan="3">Bargeld</td>
    <td><input type="text" name="cash" value="" id="amount_1" class="calcsum notice" title="Istwert eingeben"/></td>
    <td><div class="style_calculated" id="nextam_1"></div></td>
</tr>

这里是div：

<tr>
    <td colspan="2"><b>Bestandswert Gesamt:</b></td>
    <td><input type="button" name="bestandswert" id="calculate_goods" value="Berechnen" /></td>
    <td><div class="style_calculated calcsum" id="tradegoods" id="amount_14"></div></td>
    <td><div class="style_calculated nextsum" id="next_tradegoods"></div></td>
</tr>

（第二个字段，下一个字段目前不相关，后面会出现）

在第二个html示例中，您可以看到具有tradegoods的div是缺少的。按下＆＃34; calculate_goods＆＃34;后，该值将被填充。 ..你还需要示例脚本吗？

Answer 1

您无法使用$（this）.val（）访问Div的内容。相反，您必须使用 $（this）.html（）或 $（this）.text（）来获取存储在Div中的值。

Answer 2

div标记被忽略的原因是因为.val()没有读取div的文本。

您需要修改代码以检查div的.text()：

$('.calcsum').each(function(){;
    value = ($(this).is("input")) ? Number($(this).val()) : Number($(this).text());
    amount_sum += value;
    console.log(value);
})

Answer 3

检查是div，然后阅读.text()，否则.val()。

$('#calculate').click(function() {
    var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){;
        var value = $(this).is('div')?$(this).text():$(this).val();
        console.log(Number(value ));
        amount_sum += Number(value );
    });
    $('#amount_worth').html(amount_sum);
});

Answer 4

尝试以下代码可以解决您的问题，

你的脚本是这样的，

$(document).ready(function () {
        $('#calculate').click(function () {
            var amount_sum = 0;
            //calculate total worth of money
            $('.add').each(function () {;
                amount_sum += Number($(this).val());
            });
            $('#amount_worth').html(amount_sum);
        });
    });

你的样式表，

.add {
        width:100px;
    }

你的表格，

<form id="frm">
<input type="text" class="add" id="1" />
<input type="text" class="add" id="2"/>
<input type="text" class="add" id="3"/>
<input type="text" class="add" id="4"/>
<input type="button" value="Add" id="calculate" />
<div id="amount_worth"></div></form>

Answer 5

查看此工作fiddle

HTML：

<input type="text" class="calcsum" value="1">
    <input type="text" class="calcsum" value="2">
        <input type="text" class="calcsum" value="3">

            <div class="calcsum">4</div>
            <div class="calcsum">5</div>
            <div class="calcsum">6</div>

JS：

var amount_sum = 0;
    //calculate total worth of money
    $('.calcsum').each(function(){
        //console.log($(this));
        //checks whether the DOM element is an input element or a div
        if(this.tagName.toLowerCase() == "input")
        {
            amount_sum += Number($(this).val());
        }
        else if(this.tagName.toLowerCase() == "div")
        {
            amount_sum += Number($(this).html());
        }
        console.log(Number($(this).val()));
    });

alert(amount_sum);

使用jquery对输入和div求和 - 保存值不起作用

5 个答案: