Liquid, изменение кнопок

Question

Не смог разобраться, как правильно навесить изменение кнопок у товара. При наличии товара в корзине, у кнопки товара должен меняться фон на зеленый. Получилось получить сравнение товара в корзине и коллекции товара. Код ниже:

  EventBus.subscribe('update_items:insales:cart', function () {
  let prodId = data.id;
  let item = Cart.order.getItemByID(prodId);
  let btn = document.querySelector('.product-button');
  console.log('ID : ', prodId);
  if (item) {
    console.log(item.id);
    btn.style.background = 'green';
  } else {
    console.log('проверка');
  }
});

Меняет цвет только у первой кнопки. Если что-то непонятно, спрашивайте.

Answer 1

Если я правильно понял вопрос то так.

let state = false;

const buttons = document.querySelectorAll('.a'),
    changeState = document.querySelector('.b');

changeState.addEventListener('click', () => {
    state = !state;
    if(state){
        buttons.forEach(button => button.style.background = 'green')
    } else {
        console.log('null');
        buttons.forEach(button => button.style.background = '')
    }
} );

  <div class="container">
            <button class="b">Change</button>
            <button class='a'>Click</button>
            <button class='a'>Click</button>
            <button class='a'>Click</button>
            <button class='a'>Click</button>
            <button class='a'>Click</button>
        </div>

БЛОГ НА HUSL

Liquid, изменение кнопок

Ответы (1 шт):