同类名元素批量替换文本 多商品页面货币价格换算错误求解

问题原因 #

你的代码存在以下几个核心错误导致换算失效：

• 遍历.currency-value元素时，全程使用全局选择器$('.currency-value')取值和赋值，每次循环都会选中页面所有价格元素，最终所有商品价格都会被覆盖为第一个商品的计算结果
• span属于普通文本元素，没有表单元素的value属性，$('.currency-value').val()是完全无效的冗余代码
• 用parseInt处理价格会丢失小数精度，遇到带小数的美元价格会出现计算误差
• 循环逻辑没有使用当前正在遍历的元素对象进行操作，遍历没有起到逐个处理的作用

修正后代码 #

var request = new XMLHttpRequest();
let exchange_rate = 1;
request.open('GET', 'https://api.ipdata.co/?api-key=apikey');
request.setRequestHeader('Accept', 'application/json');

request.onreadystatechange = function () {
    if (this.readyState === 4) {
        let data = JSON.parse(this.responseText);
        let currency = data.currency.code;
        // 汇率判断逻辑可按需保留原有if写法
        switch(currency) {
            case 'EUR': exchange_rate = 1.28; break;
            case 'GBP': exchange_rate = 0.73; break;
            case 'CAD': exchange_rate = 0.78740; break;
            default: exchange_rate = 1;
        }
        // 批量替换所有商品的货币符号
        $('.currency-symbol').text(currency);
        // 逐个处理每个商品的价格换算
        $('.currency-value').each(function () {
            // 读取当前遍历元素的原始美元价格
            let originalPrice = parseFloat($(this).text());
            // 换算后保留两位小数，符合货币展示规范
            let convertedPrice = (originalPrice * exchange_rate).toFixed(2);
            // 将换算后价格写回当前元素，不影响其他商品
            $(this).text(convertedPrice);
        });
    }
};

request.send();

主要修改说明 #

1. 遍历每个价格时使用$(this)指向当前正在处理的元素，避免全局选择器覆盖所有商品价格
2. 替换parseInt为parseFloat保留价格小数精度，换算后用toFixed(2)统一保留两位小数
3. 删除了冗余的无效代码，优化了汇率判断逻辑的执行效率

内容的提问来源于stack exchange，提问作者Gandalf