Как запомнить значение атрибута data?

Question

[ragnar_ok]

Как правильно будет запомнить значение атрибута data у элемента и передать его при клике по другому элементу? По условию задачи невозможно разместить data у другого элемента.
codepen.io

Answer 1

[RAX7]

Comments

[ragnar_ok]

Супер!

Answer 2

[Шохрух Шаймардонов]

Подкорректировал

Answer 3

[UndineS]

В конкретно Вашем случае - можно так:

$('.js-modal-join').click(function() {
        alert($('.js-join').data('id'))
    });

А на практике модальные окна, например, часто используются, чтобы показать форму, в которой что-то нужно заполнить/кликнуть (например, для отправки заявки). Чтобы получить информацию, с какого товара был клик (заявка на какой товар оставляется), то в обработчике клика прописывают заполнение скрытого поля формы (), значение этого поля отправляется с другими данными формы на последующую обработку.

Comments

[UndineS]

Вы убрали комментарий, что ссылок может быть много. Вот еще варианты в ответ:
Придется как-то выделять выбранный вариант.

Из идей -

$('.js-join').click(function() {
        let id = $(this).data('id');
        $('.js-join').removeClass('active'); //удаляем у всех ссылок класс active (ранее выбранных)
        $(this).addClass('active'); //добавляем выбранной ссылке класс active
        $.fancybox.open({
            src: '#modal-forum-join'
        });
        $('.js-modal-join').data('id', id);
    });
$('.js-modal-join').click(function() {
        alert($('.js-join.active').data('id'));
    });

другой вариант - если есть доступ к коду, формирующему цикл, то можно заменить на (список, в котором необходимо выбрать один вариант), сами круглые кнопки можно скрыть с помощью CSS, лишь бы были видны метки (по клику на выделяется соответствующий элемент списка, это стандартное поведение).

Пример кода html:

<input id="rad1" type="radio" name="rad"/><label for="rad1" data-id="1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2" data-id="2">Radio 2</label>

Тогда можно будет узнать, какой элемент выбран, таким селектором:

alert($('input[type="radio"]:checked+label').data('id')); //получаем id элемента label у выбранного пункта списка

Получение id непосредственно из тега (атрибут "id", а не "data-id"):

alert($('input[type="radio"]:checked').attr('id')); //получаем id элемента label у выбранного пункта списка