Как работать с data-* аттрибутами?

Question

У меня есть в цикле ссылки у ссылок дата аттрибуты, к примеру data-date, data-title и т.д.

Мне нужно по клику на ссылку, чтобы данные этой же ссылки брались и вставлялись куда мне нужно, но это не работает. Как исправить?

jQuery(function($){
              $('.email__button-click').click(function(){
                let email = $(this);
                //let email = document.getElementById( 'email__button-click' );
                id = email.dataset.test;
                alert(id);
              });
            });

Где закомментировано, работает. т.к. указываю класс в ручную, а когда использую this, отказывается работать. Выдает ошибку test, т.е. название дата data-test

Answer 1

Обращайтесь к data-атрибутам через метод data

Пример:

jQuery(function($) {
    $('.email__button-click').click(function() {
        let email = $(this);
        let text = email.data('test') + ", " + email.data('email') + "\n\n" 
            + email.data().test + ", " + email.data().email;
        alert(text);
    });
});

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
 
<div class="email__button-click" data-test="Hello World!" data-email="@email">Click me!</div>

</body>
</html>

БЛОГ НА HUSL

Как работать с data-* аттрибутами?

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