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

【问题标题】：Sum input and divs with jquery - saving the value not working使用 jquery 对输入和 div 求和 - 保存值不起作用
【发布时间】：2014-06-16 09:24:54
【问题描述】：

我有一个非常大的表单，它有输入和带有“calcsum”类的普通 div。输入由用户填写，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>

（第二个字段next暂时不相关，这个稍后再说）

在第二个 html 示例中，您可以看到带有 tradegoods 的 div 是缺失的。按下“calculate_goods”后该值将被填充..您还需要示例脚本吗？

【问题讨论】：

标签： jquery

【解决方案1】：

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

【讨论】：

【解决方案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);
})

【讨论】：

omg 非常感谢你，我真的需要休息一下！

【解决方案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);
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案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);

【讨论】：