如何为求和div的脚本添加折扣输入字段？

AI 小北

2026-7-11

解决方案

1. 更新HTML结构

添加折扣输入字段，让用户可输入折扣百分比：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="somar">500</div>
<div class="somar">1.000</div>
<div class="somar">1.000</div>
<div id="resultado"></div>

<label for="discountInput">折扣百分比(%):</label>
<input type="number" id="discountInput" min="0" max="100" step="0.1" placeholder="输入折扣">
<div id="discount"></div>

2. 修改JavaScript代码

封装总价计算逻辑，添加折扣计算函数，并监听输入框变化实时更新结果：

// 计算原始总价
function calculateTotal() {
    return $('.somar').get().reduce(function(tot, el) {
        var numero = el.innerHTML.split('.').join('').split(',').join('.');
        return tot + Number(numero);
    }, 0);
}

var total = calculateTotal();
$('#resultado').html(total.toLocaleString(undefined, {minimumFractionDigits: 2}));

// 更新折扣后总价
function updateDiscount() {
    var discountPercent = parseFloat($('#discountInput').val()) || 0;
    var discountAmount = total * (discountPercent / 100);
    var discountedTotal = total - discountAmount;
    
    $('#discount').html(`折扣后总价: ${discountedTotal.toLocaleString(undefined, {minimumFractionDigits: 2})} (折扣金额: ${discountAmount.toLocaleString(undefined, {minimumFractionDigits: 2})})`);
}

// 监听输入变化，实时更新
$('#discountInput').on('input change', updateDiscount);