Как при клике на кнопку с помощью jquery проверить значение input и засунуть его в «дату» кнопки?

Question

[Дмитрий Крупин]

Есть такой html код:

<form class="cart">	
   <div class="quantity">
   <input type="number" id="5e7901376755e" class="qty"  name="quantity"   value="1" >
   </div>
<a rel="nofollow" href="#" data-quantity="1"  class="add_to_cart_button">В корзину</a>
</form>

Есть текущий обработчик, который при смене данных в поле ввода меняет данные у кнопки.

<script>
    jQuery(document).ready(function($) {
        $(document).on( 'change', '.quantity .qty', function() {
            $(this).parent('.quantity').next('.add_to_cart_button').attr('data-quantity', $(this).val());
        });
    });
</script>

Нужно изменить так, чтобы при нажатии на кнопку была проверка поля ввода и данные из него записывались в data-quantity этой же кнопки.

Пробую вот так, но не получается:

$(".add_to_cart_button").on('click input', function() {
                $(this).data('quantity', $(this).parent().find('input.qty').val() ); 
            });

Answer 1

[Stopy]

Чтобы у тебя заработало, делай не

$(this).data('quantity', $(this).parent().find('input.qty').val() );

а

$(this).attr('data-quantity', $(this).parent().find('input.qty').val() );

Если хочешь понять почему у тебя работает не так, почитай вот тут документацию https://api.jquery.com/data/#data2

Description: Return arbitrary data associated with the first element in the jQuery collection, as set by data() or by an HTML5 data-* attribute.

Смысл в том что метод data() в jquery устанавливает значение в рамках своего хранилища, для переданного элемента, а не в атрибут html элемента. А при получении значения этим методом, возвращает в приоритете значение data атрибута элемента, а если его нет - ищет в своем хранилище.

Comments

[Дмитрий Крупин]

Спасибочки