Как при обновлении значения в data-attribute из тега переносить это значение в input value?

Question

[EvgenyJozef3000]

Добрый день. Имеется следующий кусок кода:

<span data-value="39100" data-currency="RUB" class="small to-cart btn btn-default transition_bg animate-load" data-item="312" data-float_ratio="" data-ratio="1" data-bakset_div="bx_basket_div_312" data-props="" data-part_props="Y" data-add_props="Y" data-empty_props="Y" data-offers="" data-iblockid="17" data-quantity="1"></span>

Как при обновлении значения атрибута data-quantity это значение переносить в значение input, то бишь сюда:

<input name="itemQuantity_0" value="1" type="hidden">

Таким образом, чтобы при изменении значения data-quantity, например, с 1 на 3 на странице, изменялось value="1" инпута с name=itemQuantity_0 на 3, то есть так:

<input name="itemQuantity_0" value="3" type="hidden">

Как это сделать?

Comments

[DanKud]

В следствии каких действий у вас происходит изменения атрибута data-quantity? Если эти изменения происходят независимо от вас, то можно использовать MutationObserver() для отслеживания изменений в элементе.

Answer 1

[DanKud]

MutationObserver()

const obsElement = $('.to-cart');
const attrName = 'data-quantity';
 
const observer = new MutationObserver(m => {
    m.forEach(m => {
        if (m.attributeName === attrName) {
            $('[name="itemQuantity_0"]').val(obsElement.attr(attrName));
        }
    });
});

observer.observe(obsElement[0], { attributes: true });