使用jQuery向单个URL追加参数：重复变体参数需覆盖

已实现基于选择数量构建加入购物车链接URL的功能，但存在问题：修改已选数量时，链接末尾会重复添加相同变体的variation_id和quantity参数，需要确保每个变体仅出现一次，修改数量时覆盖原有参数。

核心思路是每次生成链接时从基础URL重新构建参数，而非在已有链接上累加参数。具体修改如下：

1. 固定基础购物车链接，避免在旧链接上叠加参数
2. 遍历所有数量选择框，收集所有qty>0的变体参数
3. 将收集到的参数拼接回基础URL，生成全新的加购链接

修改后的完整代码：

<table id="order">
<tr>
  <td class="id" data-id="3">Adult</td>
  <td class="price" data-price="50.00">50.00</td>
  <td class="qty">
  <select name="qty">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  </td>
</tr>
<tr>
  <td class="id" data-id="4">Child</td>
  <td class="price" data-price="30.00">30.00</td>
  <td class="qty">
    <select name="qty">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  </td>
</tr>
</table>

<div id="total">
$0.00
</div>

<div id="link">
  <a href="https://example.com/cart/?add-to-cart=1370">Test Link</a>
</div>

<script>
$(document).ready(function() {
    // 保存基础链接，确保每次生成新链接时从干净的基础URL开始
    const baseHref = $("#link a").attr("href").split('?')[0] + '?add-to-cart=1370';

    $('.qty select').change(function() {
        let calculated_total_sum = 0;
        let parameters = [];

        $("#order .qty select").each(function () {
            // 改用closest+find获取数据，DOM结构变化时更稳定
            const id = $(this).closest('tr').find('.id').attr('data-id');
            const price = $(this).closest('tr').find('.price').attr('data-price');
            const qty = $(this).val();
            const subtotal = price * qty;
            
            if (qty > 0) {
                calculated_total_sum += parseFloat(subtotal);
                // 收集有效变体的参数
                parameters.push(`variation_id=${id}`, `quantity=${qty}`);
            }
        });
        
        // 拼接最终链接：有参数则追加，无参数则保留基础链接
        const newHref = parameters.length ? `${baseHref}&${parameters.join('&')}` : baseHref;
        $('#link a').attr('href', newHref);
        // 总价保留两位小数，格式更规范
        $("#total").html(`$${calculated_total_sum.toFixed(2)}`);
    });
});
</script>

• 提前保存baseHref，彻底避免旧参数残留问题
• 用数组收集参数，比字符串拼接更易维护，也不会出现重复叠加
• 优化DOM选择器，closest('tr').find()比prevAll更健壮，不受表格列顺序影响
• 总价显示格式化，保留两位小数，符合金额展示规范

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