是否可以使用类来创建addEventListener触发器？OR 覆盖循环中表单中的选择，以动态添加来自选择表单帮助程序的唯一 ID。 更准确地说，我正在使用grouped_collection_select.
我在循环中的表单中有一个非唯一 ID，该 ID 会创建许多重复但唯一的表单，但选择 id 不是唯一的。 我的 javascript 在选择时被触发，但由于 id 不是唯一的，它只在第一个选择选项上触发，而在接下来的其他表单选择选项更改时没有任何反应。
我有以下表格：
总之：
<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：
<script>
document.getElementById("shop_product_style_id").addEventListener("change", function(){
window.alert("Alert");
}, false);
</script>
(所有的JavaScript都是循环的，是的，这不是好的做法，但是在我学习更多的JavaScript并修复它之前，我想要一个工作系统(
因此，由于这是使用form_for表单助手在 rails 中完成的，因此 id 是自动生成的，并且由于一个页面上有多个表单而不是唯一的。 对于来自我的 Rails 标签的任何人，有没有办法覆盖选择菜单 ID 并根据循环计数等应用唯一的菜单 ID？
这是有效的，尽管问题是"id"不是唯一的，但这个 id 是由 rails 创建的，不能是唯一的，因为这就是帮助程序的操作方式。
我添加了一个唯一的类并尝试了以下代码，但这不起作用：
(代码摘要(：
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);
};
几天前我尝试了这个和类似的迭代，但无法让任何类似的东西工作。 我发现了一篇关于尝试使用类作为选择侦听器的 SO 帖子。 这应该使用该类，然后遍历与 javascript 事件中匹配并触发代码的所有类。 但我无法破解它。
这是代码：https://jsfiddle.net/wfznoept/1/
shop_product_id是动态的，可以随时更改，因此硬编码将不起作用。 除了使用类迭代方法的表单之外，还有其他方法可以实现这一点，也许通过使用表单 ID 和类作为组合来创建唯一标识符？
unique class"纯粹是无稽之谈。HTML中类的全部意义在于它们不是唯一的。它们描述了元素组的共享行为或外观。你对这个问题的思考完全错误。
相反，将类视为增强元素行为的一种方式。你JS不需要知道它是模糊页面上的特殊woozit。相反，它只知道 woozit 的行为是什么样子的。
如果要在不循环访问元素的情况下处理事件，则可以创建委托事件处理程序，这些处理程序利用事件冒泡到 DOM 顶部的事实。
document.addEventListener("change", function(e) {
let t = e.target;
if (t.matches('select.special')){
console.log(t.value);
}
});<form>
<select class="special">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>此示例向文档本身添加一个事件处理程序，如果您使用的是涡轮链接，这是一个好主意，因为处理程序是幂等的。
将JS保留在资产管道(或Webpacker(中，并且不在您的视图中。使用 erb 插值实际上是最后的手段，如果可能的话，不应该使用。如果需要在视图和 javascript 之间传递信息，请使用数据属性。
document.addEventListener("click", function(e) {
let t = e.target;
if (t.matches('button.special')){
console.log(t.dataset.foo);
}
});<button class="special" data-foo="bar">Click me!</button>这使您可以通过CDN缩小，连接和分发JS，这有利于性能并避免造成可怕的混乱。你不妨从一开始就学会做对，而不是养成坏习惯。