jquery 价格联动

瑜舒涵 3个月前 40浏览 0评论

jQuery是一种快速、简洁的JavaScript库,可实现各种功能。其中,价格联动是在网页中必不可少的一种功能,特别是在电商平台中,价格联动功能更受到用户的关注和追捧。

$(function() {
    // 获取价格元素
    var $price = $('#price');
    // 获取重量元素
    var $weight = $('#weight');
    // 获取总价元素
    var $totalPrice = $('#totalPrice');

    // 监听价格和重量输入框的值变化
    $price.on('input', function() {
        // 计算总价
        calcTotalPrice();
    });
    $weight.on('input', function() {
        // 计算总价
        calcTotalPrice();
    });

    function calcTotalPrice() {
        // 获取价格和重量的值
        var priceVal = parseFloat($price.val()) || 0; // 如果值为空或非数字,则默认为0
        var weightVal = parseFloat($weight.val()) || 0;
        // 计算总价
        var totalPriceVal = priceVal * weightVal;
        // 设置总价元素的值
        $totalPrice.text(totalPriceVal.toFixed(2)); // 保留两位小数
    }

});

以上代码实现了价格联动功能,当输入价格和重量时,总价元素会自动计算并显示总价。通过jQuery库提供的事件监听和计算函数,实现了价格联动功能的快速开发,有利于提高开发效率。