如何用JavaScript修改Django模板循环中各交易的货币显示

你当前的问题根源是循环渲染时重复使用了同一个id="price"——HTML规范里id是DOM元素的唯一标识，document.getElementById()只会返回第一个匹配的元素，所以只有第一条交易的价格会被修改。

下面是具体的修复步骤：

1. 修改Django模板，将id替换为class #

把价格元素的id="price"改成class="price"，因为class可以重复用于多个元素：

{% for transaction in transactions %}
    <ul>
        <li>{{transaction.number}}</li>
        <li class="price">{{transaction.price}} USD </li>
        <li>{{transaction.created}}</li>
    </ul>
    <hr>
{% endfor %}

2. 更新JavaScript代码，批量修改所有价格元素 #

在下拉菜单的onchange事件中，获取所有class为price的元素，遍历每个元素更新内容：

方法一：使用getElementsByClassName #

const priceElements = document.getElementsByClassName('price');
for (let i = 0; i < priceElements.length; i++) {
    priceElements[i].innerHTML = `${totalExchangeRate2} ${selectValue}`;
}

方法二：使用querySelectorAll（更灵活） #

const priceElements = document.querySelectorAll('.price');
priceElements.forEach(element => {
    element.innerHTML = `${totalExchangeRate2} ${selectValue}`;
});

额外优化：基于原始价格计算（避免精度丢失） #

如果每次切换货币时直接覆盖innerHTML，多次切换后可能会出现精度问题。建议把原始的USD价格存在元素的自定义属性里，每次切换都基于原始值重新计算：

修改模板： #

<li class="price" data-original-price="{{transaction.price}}">{{transaction.price}} USD </li>

修改JavaScript： #

const priceElements = document.querySelectorAll('.price');
priceElements.forEach(element => {
    // 获取原始价格并转换为数字
    const originalPrice = parseFloat(element.dataset.originalPrice);
    // 计算转换后的价格，保留两位小数
    const convertedPrice = (originalPrice * totalExchangeRate2).toFixed(2);
    // 更新显示内容
    element.innerHTML = `${convertedPrice} ${selectValue}`;
});

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