如何优化与压缩大量重复的商品选择器JavaScript代码？

方案1：提取公共逻辑+循环ID列表 #

如果能整理出所有产品的ID后缀列表，把重复逻辑封装成函数，循环绑定即可，后续新增ID只需更新列表：

// 所有产品的ID后缀集合
const productIds = ['25b', '26', '29', 'Zx3', '001sfF'];

// 封装通用的事件处理逻辑
function bindSelectorEvent(selectorId, purchaseId) {
  document.getElementById(selectorId).onchange = function() {
    document.getElementById(purchaseId).href = `https://example.com/?add-to-cart=${this.selectedOptions[0].getAttribute('data-product')}&variation_id=${this.value}/`;
  };
}

// 批量绑定事件
productIds.forEach(id => {
  bindSelectorEvent(`product-selector-${id}`, `purchase-${id}`);
});

方案2：类选择器+自定义属性关联 #

给所有选择器和对应购买链接添加统一类名，用data-product-id关联两者，不用维护ID列表：

修改后的HTML示例：

<select id="product-selector-25b" class="product-selector" data-product-id="25b">
  <!-- 选项内容 -->
</select>
<a id="purchase-25b" class="purchase-link" data-product-id="25b" href="#">立即购买</a>

优化后的JS代码：

// 获取所有产品选择器
const selectors = document.querySelectorAll('.product-selector');

selectors.forEach(selector => {
  selector.onchange = function() {
    const productId = this.dataset.productId;
    const purchaseLink = document.querySelector(`.purchase-link[data-product-id="${productId}"]`);
    purchaseLink.href = `https://example.com/?add-to-cart=${this.selectedOptions[0].getAttribute('data-product')}&variation_id=${this.value}/`;
  };
});

方案3：事件委托（最推荐） #

把事件绑定到父容器，利用事件冒泡处理，动态新增的选择器也能自动生效，代码最精简：

假设HTML结构：

<div id="product-wrapper">
  <select id="product-selector-25b">...</select>
  <select id="product-selector-26">...</select>
  <!-- 更多选择器 -->
</div>

优化后的JS代码：

const wrapper = document.getElementById('product-wrapper');

wrapper.addEventListener('change', function(e) {
  // 只处理产品选择器的change事件
  if (e.target.id.startsWith('product-selector-')) {
    const productId = e.target.id.split('-').pop(); // 提取ID后缀
    const purchaseLink = document.getElementById(`purchase-${productId}`);
    purchaseLink.href = `https://example.com/?add-to-cart=${e.target.selectedOptions[0].getAttribute('data-product')}&variation_id=${e.target.value}/`;
  }
});

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