Сопоставить массивы JS

Рейтинг: 0Ответов: 1Опубликовано: 10.02.2023

Всем привет. Есть страница товара в магазине. В качестве товара выступают коды подарочных карт. У каждой своя цена. Карты покупаются с помощью формы с кнопками номиналов карт (у каждой своя цена), которая со страницей товара почти никак не связана (форма в попапе, вызывается нажатием на кнопку), да и карточки товаров появились бонусом, изначально они не планировались. Но раз уж есть такое, надо поднастроить. Суть задачи в том, чтобы при нажатии на вызов попапа в форме на кнопку нужного номинала карты происходил клик. Чтобы соответственно в форме менялись параметры. Думал цепляться к url страницы товара (в url есть что-то вроде nominal-4000). Но не знаю как сделать сопоставление, чтобы часть этого url сравнивалась с массивом кнопок у которых тоже есть такой же класс(типа nominal-4000). Вот что смог сделать:

const popupBtn = document.querySelector('.popup-btn');

pb.addEventListener('click', (e) => {
   e.preventDefault();
   document.body.classList.add('popup-open');


   let nominal4000 =  document.querySelector('.nominal-4000');

   let field = 'nominal-4000';

   if(window.location.href.indexOf(field) > -1) {
      nominals.forEach(nominal => {
         nominal.classList.remove('active-nominal');
         if (nominal.classList.contains(field) ) {
            nominal4000.click();
            nominal4000.classList.add('active-nominal');
         }
      })
   }

Здесь просто я ищу кнопку и часть url страницы по nominal-4000. Работает. Но всего товаров, а следовательно страниц и следовательно и кнопок будет 10. То есть нужен массив. И их сравнение, либо что-то еще. В таких дебрях JS я еще не копался, не могу понять что и как. Использовать например массив с номиналами (они же часть url):

var fields = [
  'nominal-3000',
  'nominal-4000',
  'nominal-5000'
];

Потом массив с классами кнопок, как то так -

var nominals = document.querySelectorAll(`${fields}`);

вот такое сравнение двух массивов

let isFounded = fields.some( ai => nominals.includes(ai) );

Но все это не работает вместе. Кто шарит в массивах, помогите плиз)

javascript wordpress woocommerce массивы
Источник: Stack Overflow на русском

Ответы

▲ 0
const popupBtn = document.querySelector('.popup-btn');

popupBtn.addEventListener('click', (e) => {
  e.preventDefault();
  document.body.classList.add('popup-open');

  var fields = [
    'nominal-3000',
    'nominal-4000',
    'nominal-5000'
  ];

  var nominals = document.querySelectorAll(`.${fields.join(', .')}`);

  fields.forEach(field => {
    if(window.location.href.indexOf(field) > -1) {
      nominals.forEach(nominal => {
        nominal.classList.remove('active-nominal');
        if (nominal.classList.contains(field) ) {
          nominal.click();
          nominal.classList.add('active-nominal');
        }
      })
    }
  });
});