Javascript 是否使用唯一类创建选择事件侦听器？

使用类是否可以创建

addEventListener

触发器？或者在循环中覆盖表单中的select以从select表单帮助器动态添加唯一id。更准确地说，我使用的是

grouped\u collection\u select

我在循环中的表单中有一个非唯一ID，该循环创建了许多重复但唯一的表单，但select ID不是唯一的。我的javascript在select上被触发，但由于id不是唯一的，它只在第一个select选项上触发，而在下面的其他表单select选项更改上不会发生任何事情

我有以下表格：

简言之：

<form class="edit_shop_product" id="edit_shop_product_3" action="/shop_products/3" accept-charset="UTF-8" method="post">
  <select class="shop_style_3" name="shop_product[style_id]" id="shop_product_style_id">
    <option value="">Select Style</option>
    <optgroup label="Apparel"><option selected="selected" value="1">Hoodies</option>
    <option value="2">T-Shirts</option>
    <option value="3">Long Sleeves</option></optgroup>
  </select>
</form>
form 2
<form class="edit_shop_product" id="edit_shop_product_4" action="/shop_products/4" accept-charset="UTF-8" method="post">
  <select class="shop_style_4" name="shop_product[style_id]" id="shop_product_style_id">
    <option value="">Select Style</option>
    <optgroup label="Apparel"><option value="1">Hoodies</option>
    <option selected="selected" value="2">T-Shirts</option>
    <option value="3">Long Sleeves</option></optgroup>
  </select>
</form>

几天前，我尝试过这种迭代和类似的迭代，但都没有成功。我发现了一篇关于尝试使用类作为选择侦听器的文章。这应该使用该类，然后在javascript事件中迭代匹配并触发代码的所有类。但我无法破解它

代码如下：

商店产品id是动态的，可以随时更改，因此硬编码不起作用。除了使用类迭代方法之外，还有其他方法可以实现这一点吗？也许可以使用表单id和类作为组合来创建唯一标识符？

“唯一类”完全是胡说八道。HTML中类的全部要点是它们不是唯一的。它们描述了一组元素的共同行为或外观。你对这个问题的想法完全错了

相反，将类看作是增强元素行为的一种方法。你不需要知道这是fuzzits页面上的特殊woozit。相反，它只知道woozit的行为

如果希望在不遍历元素的情况下处理事件，可以创建委托事件处理程序，利用事件冒泡到DOM顶部这一事实

document.addEventListener（“更改”，函数（e）{
设t=e.target；
if（t.matches（'select.special'））{
console.log（t.value）；
}
});

1.
2.
3.

<script>
document.getElementById("shop_product_style_id").addEventListener("change", function(){
  window.alert("Alert");
}, false);
</script>

var shop_style_<%= "#{ff.object.print_location.id}" %>_<%= "#{shop_product.id}" %> = document.getElementByClass("shop_style_<%= "#{shop_product.id}" %>");
  for (let i = 0, i < shop_style_<%= "#{ff.object.print_location.id}" %>_<%= "#{shop_product.id}" %>; i++){
    window.alert("Alert");
    }
  }, false);
};