Как при клике получить все data атрибуты?

Question

[Genri_Rus]

Есть ссылка

<a href="#" data-quantity="1" data-product_id="103" data-product_sku="" class="cart-btn button product_type_simple add_to_cart_button ajax_add_to_cart"></a>

<input type="text" class="num-items" value="2">

Мне нужно получить все классы и data атрибуты

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

Допустим при изменении данных в инпуте, отправлять запрос на клик

jQuery('.inline-block').on('change', 'input.num-items', function(){
					
                    var test = $('a[data-quantity]').trigger('click');
					console.log(test);
                
            });

Comments

[Kovalsky]

Гуглится в секунду, репорт

[Genri_Rus]

Никита Полевой, пример ?

[Genri_Rus]

Никита Полевой, мало получить, их нужно еще все задействовать при клике

типа:

let quantity = $(this).data('data-quantity');

Я их всех получу, а вот потом оправить по клику ?

[Kovalsky]

Genri_Rus, ваш код вернёт значение конкретно data-quantity атрибута, а не всех. Ну это я так, к слову.

Отправить куда? А, в смысле запрос отправлять? Если да, то это вам сюда

[Genri_Rus]

Никита Полевой, ну вот я так сделал, но у меня клик не срабатывает

https://codepen.io/Genri_Rus/pen/LYPQRXz

[Kovalsky]

Genri_Rus, я до сих пор мало понимаю, что происходит. Так послать нужно или на ссылку нажать? Если ссылку, то используйте нативный метод элемента click.

[Genri_Rus]

Никита Полевой, сделать имитацию по ссылке

Я поменял на нативный подход, все равно не работает

Т.е. при изменении в инпуте значения, а именно событие 'change' - должен срабатывать клик

[Kovalsky]

Genri_Rus, только что проверил: $('.link a')[0].click работает

[Genri_Rus]

Никита Полевой, т.е. у вас при изменении значений у input срабатывает клик и открывается ссылка google ?

[Kovalsky]

Genri_Rus,
Ну вроде как

jQuery('.inline-block').on('change', 'input.num-items', function(){
  
   var test = $('.link a')[0].click();

  
  console.log(test);        
});

[Genri_Rus]

Никита Полевой, спасибо

А почему так не хочет работать ?

$('.link a').click();

[Kovalsky]

Genri_Rus, потому что click у jQuery кажется вызывает обработчики которые с помощью jQuery и повешены. А нативный клик вызывает все-все-все повешенные на клик обработчики. Вроде бы

Answer 1

[S-a-n-d-r-0]

Для вашего же примера:
https://codepen.io/s-a-n-d-r-0/pen/YzKepjM?editors=1111

Comments

[Genri_Rus]

Спасибо большое, а вот как это все теперь по клику сымитировать ?

Допустим в инпуте изменяя значение - произошел клик

var test = $('.link a')[0].click(); - этот вариант только для первого элемента, а если у меня таких одинаковых ссылок несколько ?

[S-a-n-d-r-0]

https://codepen.io/s-a-n-d-r-0/pen/qBWxqLQ?editors=1111
или
https://codepen.io/s-a-n-d-r-0/pen/vYBdyMo?editors=1111 - тут ссылки еще и открываются

[Genri_Rus]

S-a-n-d-r-0, спасибо огромное

А вот если мне нужно активировать ссылки только на определенном инпуте ?

https://codepen.io/Genri_Rus/pen/VwZQzNQ

Допустим я что-то изменяю во втором инпуте, соответственно меня должно перекинуть на вторую ссылку (не на все)

[S-a-n-d-r-0]

Можно сделать это по-разному, вариантов очень много. Например, так. Присваиваем input'ам какой-нибудь атрибут, а ему какой-то значение. Какой атрибут и какое именно значение - абсолютно не важно. Лишь бы название атрибута было одинаковым, а значение у всех разным (это важно. Только если элементы с одним тэгом чем-то отличаются - классом, id или любым другим атрибутом, только тогда вы сможете адекватно отделить один от другого с помощью js и работать с ними). Например,
anycustom-attribute-you-want="smth1". Ссылке, на которую хотите при этом перейти ставите соответственно тот же атрибут и то же значение. Всё. Вы логически увязали ссылку и input. Осталось ток прочесть эту связь с помощью js и реализовать нужные действия.

https://codepen.io/s-a-n-d-r-0/pen/zYOREmW?editors=1111

В примере специально допустил ошибку в названии атрибута у второго input'а, чтобы вы посмотрели, как можно отлаживать код. Сейчас редактирование 1го инпута (и щелкнуть по другому месту после окончания редактирования) открывает гугл, третьего - твиттер. Второго будет яндекс, когда исправите

[Genri_Rus]

S-a-n-d-r-0, спасибо )

А если мне нужен именно клик ?

Допустим вместо ссылки может быть button, или при изменении input таким способом popup окно все равно откроется ?

[S-a-n-d-r-0]

тогда вместо перехода по ссылке делайте клик) Пример, как это делается, был где-то выше

[Genri_Rus]

S-a-n-d-r-0, т.е $(myLink)[0].click();

Но тогда будет кликаться каждый отдельный элемент или только первый ?

[S-a-n-d-r-0]

В том примере, о котором мы сейчас говорим, myLink выбирается как элемент с селектором 'a[anycustom-attribute-you-want="' + myAttr + '"]', где myAttr - уникальное для ссылок значение атрибута. То есть мы заведомо знаем, что ссылка с таким атрибутом у нас только одна. Значит, кликаться будет на нужный

Answer 2

[Rsa97]

Element.attributes
Element.classList

Comments

[Genri_Rus]

Нужен пример на jquery

[Genri_Rus]

TNPTSYWWCC, вот - не работает: https://codepen.io/Genri_Rus/pen/LYPQRXz