Как изменить цвета у классов кнопок плагина item-quantity-dropdown?

Question

В jquery дропдаун плагине item-quantity-dropdown, есть такой повторяющийся код с разными data-id.

<div class="iqdropdown-menu-option" data-id="item1">
  <p class="iqdropdown-item">Option 1</p>
  <div class="iqdropdown-item-controls">
    <button class="button-decrement">
      <i class="icon-decrement"></i>
    </button>
    <span class="counter">0</span>
    <button class="button-increment">
      <i class="icon-decrement icon-increment"></i>
    </button>
  </div>
</div>

Например, data-id="item1", data-id="item2", data-id="item3"...

Нужно изменять цвет для классов .button-decrement и .icon-decrement::after при значении .counter больше 0 и обратно при значении равном 0. При этом желательно не менять код плагина.

Как такое можно сделать ? Нужно к элементам с классами .button-decrement, .icon-decrement и .button-increment дополнительные id динамически навешивать и к кнопкам события onclick также добавлять? Дайте волшебного пендаля в правильном направлении, а то не пойму куда копать

Answer 1

Для этого нужно повесить слушателя на событие изменения счётчика onChange и в зависимости от значения переменной count добавлять/удалять класс обозначающий пустой элемент empty

Теперь просто добавте стили для кнопок вложенных в элемент с классом empty

$(document).ready(() => {
            var elem = $('.iqdropdown');
            elem.iqDropdown({
                onChange: (id, count, totalItems) => {
                    // Вызываеться при смене значений проверяет добавляет/удоляет
                    // класс empty если каунтер = 0
                    console.log('On change count', id, count, totalItems);
                    var targetItem = elem.find(`[data-id='${id}']`);
                    updateEmptyClass(targetItem, count);
                }
            });

            // Проставляет класс empty при инициализации дропдауна
            elem
                .find('.iqdropdown-menu-option')
                .each((idx, el) => {
                    updateEmptyClass($(el), parseInt($(el).find('.counter').text()))
                });
        });

        function updateEmptyClass(targetItem, count) {
            if (count === 0 ^ targetItem.hasClass('empty')) {
                if (count === 0)
                    targetItem.addClass('empty');
                else
                    targetItem.removeClass('empty');
            }
        }

Если у вас изначально все каунты по нулям, то можно убрать инициализацию ну и добавлять класс наоборот когда каунтер не пуст

БЛОГ НА HUSL

Как изменить цвета у классов кнопок плагина item-quantity-dropdown?

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