Использовать уникальный класс для создания селектора событий?

Question

Возможно ли использование класса для создания триггера addEventListener? ИЛИ, чтобы переопределить выбор в форме в пределах al oop, чтобы динамически добавить уникальный идентификатор из помощника формы выбора. Точнее, я использую grouped_collection_select.

У меня есть неуникальный идентификатор в форме, которая есть в oop, которая создает много повторяющихся, но уникальных форм, но выбранные идентификаторы не являются уникальными. Мой javascript срабатывает при выборе, но, поскольку идентификатор не уникален, он срабатывает только при первой опции выбора, и ничего не происходит при следующих других изменениях опции выбора формы.

У меня есть следующая форма:

короче:

<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, есть ли способ переопределить идентификатор меню выбора и применить уникальный, основанный на числе l oop, et c.?

Это работает, хотя проблема в том, что «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 являются динамическими c и всегда могут измениться, так что жесткое кодирование не будет Работа. Помимо формы, использующей метод итерации класса, есть ли другой способ выполнить sh, возможно, используя идентификатор формы и класс в качестве комбинации для создания уникального идентификатора?

Answer 1

«уникальный класс» - это чепуха. Весь смысл классов в 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>

Этот пример добавляет обработчик событий к самому документу, что является хорошей идеей, если вы используете turbolinks, так как обработчик идемпотентен.

Держите ваш JS в конвейере ресурсов (или в веб-пакере) и вне поля зрения. Использование 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>

Это позволяет вам минимизировать, объединять и распространять ваш JS через CDN, который хорош для производительности и позволяет избежать беспорядочных действий. С таким же успехом вы могли бы научиться делать это с самого начала, а не впадать в вредные привычки.