Как адаптировать js код для множества идентичных элементов?

Question

[FrolovSite]

При нажатии на селекты 'variable_backorders0' и 'variable_stock_status0', скрывается или показывается элемент 'pre-orders-date-var0'. Каждая вариация у вариативного товара имеет уникальные селекты и элемент. Прим. 'variable_backorders0' > 'variable_backorders1' > 'variable_backorders2' и т. д.

Пример в редакторе - https://codepen.io/YuriyFrolov/pen/VwEZZjX

Каким образом можно адаптировать условия для каждой вариации?
Буду рад даже подсказке о необходимой литературе для решения данной проблемы.

// В данный момент работает только для первой вариации
jQuery(document).ready(function ($) {
  var backorders = document.querySelectorAll("select#variable_backorders0");
  var stock_status = document.querySelectorAll("select#variable_stock_status0");
  $(stock_status).on('change', function() {
    var item = $(this).val();
    if ( item == "outofstock" || item == "instock") {
      document.querySelector(".pre-orders-date-var0").style.display = "none";
    } 
    else {
      document.querySelector(".pre-orders-date-var0").style.display = "block";
    }
  }).trigger('change');
  $(backorders).on('change', function() {
    var item = $(this).val();
    if ( item == "notify" || item == "yes") {
      document.querySelector(".pre-orders-date-var0").style.display = "block";
    } 
    else {
      document.querySelector(".pre-orders-date-var0").style.display = "none";
    }
  }).trigger('change');
});

Answer 1

[Stalker_RED]

Для начала уберите дублирующися id.

If the id value is not the empty string, it must be unique in a document.

https://developer.mozilla.org/en-US/docs/Web/API/E...

Покажите разметку, и опишите словами что вы вообще пытаетесь делать. В идеале соберите минималистичный пример на jsfiddle или codepen.

Comments

[FrolovSite]

Здравствуйте! Спасибо за ответ! Переделал. Вот что получилось - https://codepen.io/YuriyFrolov/pen/VwEZZjX
Пытаюсь сделать так, чтобы при изменении опций в селектах конкретной вариации товара, применялся стиль к элементу ".pre-orders-date-var0", который уникален для каждой вариации.

[Stalker_RED]

FrolovSite, у вас в логике пробел:
если предзаказы разрешены - дату показываем.
если в наличии - дату показываем.
а теперь ситуация: в наличии, но предзаказ запрещен - показывать или нет?

[FrolovSite]

Stalker_RED, на текущий момент это лишь пример. На практике один из селектов будет отключен чекбоксом.

[Stalker_RED]

FrolovSite, ок, предположим какое правило позже сработало, то и применилось
https://codepen.io/stalker-red/pen/ExdYydr?editors=0010

[FrolovSite]

Stalker_RED, спасибо за потраченное на меня время, но теперь я ещё меньше понимаю как решить эту проблему, так как каждая вариация имеет свой уникальный атрибут "name" для каждого селекта и элемента. Повлиять на это я не могу.

[Stalker_RED]

FrolovSite, можно и с разными, хотя странноватый у вас плагин или что это за код, который даже в классах везде циферки добавляет., непонятно зачем.
https://codepen.io/stalker-red/pen/ExdYydr?editors=0010

[FrolovSite]

Stalker_RED, спасибо! Работает! Но в данный момент работает только при изменении опции в селектах. Может быть дадите подсказку о том как сделать так, чтобы при загрузке страницы скрипт уже учитывал атрибут selected в опциях?
Пробовал:

$('[name*="variable_backorders"]').on('change', function() {
 // Скрипт
}).trigger('change');

Но сделать это одновременно для двух селектов никак не получается.

[Stalker_RED]

FrolovSite, неплохо бы научиться проверять свои утверждения :)

<select name="" id="a">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select name="" id="b">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select name="" id="c">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<pre id="out"></pre>
<script>
$('select').on('change', function() {
    out.textContent += this.id;
}).trigger('change'); // -> выводит abc, то есть срабатывает хоть на двух, хоть на трех, значит проблема где-то в другом месте.
</script>

Вы же видите, что у вас в селекторе?

[FrolovSite]

Stalker_RED, прошу прощения за беспокойство. Пожалуйста, помогите! Уже третий день не могу заставить функции корректно срабатывать в зависимости от значения <input type="checkbox">. Перепробовал уже всё что мог и не знаю куда копать для решения данной проблемы.
https://codepen.io/YuriyFrolov/pen/Jjmjgdz?editors=1111

[Stalker_RED]

FrolovSite, вы делаете что-то странное, у вас там on(change) вложены один в другой.
Так ккк я не знаю чего вы пытаетесь добиться мне сложно что-то порекомендовать кроме как выбросить этот код и написать заново, на свежую гтлову.

Попробуйте описать для начала просто словами что должно получиться в итоге.
Потом напишите алгоритм, потом уже код.

[FrolovSite]

Stalker_RED, спасибо! На самом деле я действительно не знал, что так делать неправильно. Попробую переделать.

Есть два блока(блоков может быть больше), в каждом блоке находятся чекбокс, два селекта и элемент, который нужно скрывать/показывать в зависимости от выбранных опций селектов.
При включении одного из чекбоксов, один из селектов должен перестать скрывать/показывать нужный элемент, но только в том блоке, в котором всё это находится.

Функции, которые Вы ранее написали ( https://codepen.io/stalker-red/pen/ExdYydr ) скрывающие/показывающие необходимый элемент в зависимости от выбранных опций селектов, я немного переделал и надеялся включать их попеременно с помощью чекбокса, чтобы исключить тот самый пробел в логике, о котором Вы говорили ранее.