正确组合 javascript 代码与不同的选择器 ID

Question

我有大约 30 个具有不同 ID 的选择器示例代码，我在下面提供了这些示例代码

document.getElementById("selector-1").onchange = function() {
  document.getElementById("btn-1").href = "/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}

document.getElementById("selector-2").onchange = function() {
  document.getElementById("btn-2").href = "/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}

document.getElementById("selector-3").onchange = function() {
  document.getElementById("btn-3").href = "/?add-to-cart=" + this.selectedOptions[0].getAttribute('data-product') + "&" + "variation_id=" + this.value + "/";
}

能否请您告诉我如何将所有这些组合成更通用的东西，以免每次都使用不同的 ID 带来所有代码，因为我看到目前这是非常未优化的代码。不幸的是，我的知识不足以将其重构为更有效的东西。谢谢大家。

Answer 1

没有看到 HTML（例如我可以使用 closest）你可以尝试从最近的静态容器中委派（这里我必须再次使用文档，因为我没有看到你的HTML)

document.addEventListener("change", function(e) {
  const tgt = e.target;
  if (tgt.id.startsWith("selector-")) {
    const id = tgt.id.replace("selector-", "btn-");
    document.getElementById(id).href = "/?add-to-cart=" + tgt.selectedOptions[0].getAttribute('data-product') + "&variation_id=" + tgt.value + "/";
  }
})

或者获取点击值：

document.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.id.startsWith("btn-")) {
    const id = tgt.id.replace("btn-", "selector-");
    const sel = document.getElementById(id);
    tgt.href = "/?add-to-cart=" + sel.selectedOptions[0].getAttribute('data-product') + "&variation_id=" + sel.value + "/";
  }
})

Answer 2

您可以使用文档查询选择器根据给定属性（包括 ID）的存在或值来匹配元素。由于使用简单的 css 匹配，所有函数都是相同的，例如：

console.log(Array.from(document.querySelectorAll("div[id^='selector']")));

<div id="selector-1">1</div>
<div id="selector-2">2</div>
<div id="selector-3">3</div>

然后遍历数组以将您想要的内容添加到元素中就足够了。

正确组合 javascript 代码与不同的选择器 ID

Combining javascript code with different selector IDs correctly

javascript

jquery

jquery-selectors