Как передать значение из массива в атрибут data-*?

Question

[Максим Варава]

На сайте очень много ссылок, которые ведут на открытие одного модального окна, но контент этого окна меняется в зависимости от того, по какой ссылке переходит пользователь. Я хочу воспользоваться атрибутом data-* для того что бы не городить кучу модалок. Но появляется небольшая сложность, часть модалки занимает объемный текст, который не очень хочется добавлять в каждый атрибут data-text.
Поэтому хочу сделать массив с текстом на JS и вытаскивать нужный текст по идентификатору в date-text.
Прошу помощи в коде, не могу разобраться как правильно вытаскивать нужный текст из массива по нажатию на ссылку с data-text

<a data-name="Crossfit" data-text="3" data-message="Записаться на Crossfit в понедельник" class="schedule-popup" href="#popup-schedule-1"></a>

var scheduleText = ['Кросфит','aerobics','relax']


 $(function() {
     $(".schedule-popup").click(
       function() {
         var name = $(this).attr('data-name');
         var text = $(this).attr('data-text');

         $(".crossfit-popup h3").text(name);
         $(".crossfit-popup .text-p").text(text);
       })
   });

Comments

[Максим Варава]

Всем большое спасибо за помощь!

[sergealmazov]

А теперь то же самое без jQuery

Answer 1

[ProjectSoft]

Ещё вариант
jsfiddle.net/enrvfm9u

Answer 2

[olegzpr]

jsfiddle.net/xpvt214o/358354
добавил проверку на индекс для массива
и доступ к data-* правильнее осуществлять через метод data() https://jquery-docs.ru/data/

Answer 3

[string15]

Можно обратиться к массиву по индексу который равен data-text="3"
Еще как вариант переписать структуру данных так:

const something = {
    Crossfit: "Кросфит",
    aerobics: "aerobics",
    relax: "relax"
}

<a data-name="Crossfit" data-text="3" ....></a>
<a data-name="aerobics" data-text="3" ....></a>
<a data-name="relax" data-text="3" ...></a>

const name = $(this).attr('data-name');
const currentText = something[name]; // Ваш текст