jQuery как использовать числовые c переменные в ваших селекторах

Question

Это, вероятно, действительно тривиально, но я не могу найти его, или, может быть, я не ищу правильные слова.

Все, что я хочу, это сделать одну функцию для всех моих селекторов, они иметь соответствующие номера на них. В настоящее время у меня есть рабочие функции, но я чувствую, что есть лучший способ для их кодирования.

Обратите внимание, что я должен создавать функции для каждой кнопки-1 & cursusnummer1 / button-2 & cursusnummer2

Так как можно Я превращаю это в 1 вместо 3

HTML

<ul id="cursusnummer1">
    <li>20-4-2020 – Amsterdam – 13:00</li>
    <li>24-4-2020 – Utrecht – 15:00</li>
    <li>11-5-2020 – Groningen – 13:00</li>
    <li>19-5-2020 – Haarlem – 15:00</li>
    <li>22-6-2020 – Overveen – 11:00</li>
</ul>

<a class="button-1" target="_self" data-cursus="Cursus 1 - Title" href="#" data-toggle="modal" data-target=".modal.cursus"><span>Button Text</span></a>

jQuery

   jQuery('.button-1').click(function () {
        jQuery('#cursusmodal').on('shown.bs.modal', function() {
            const dates = jQuery('#cursusnummer1 li').map((i, li) => jQuery(li).text()).get();           
            //stuff    
        });
    });
    jQuery('.button-2').click(function () {
        jQuery('#cursusmodal').on('shown.bs.modal', function() {
            const dates = jQuery('#cursusnummer2 li').map((i, li) => jQuery(li).text()).get();
            //stuff
        });
    });
    jQuery('.button-3').click(function () {
        jQuery('#cursusmodal').on('shown.bs.modal', function() {
            const dates = jQuery('#cursusnummer3 li').map((i, li) => jQuery(li).text()).get();
            //stuff
        });
    }); 

Answer 1

Дайте мне посмотреть, вам нужна только одна функция для всего вашего селектора. Поскольку у каждого селектора есть номер, вы можете использовать номер. Используйте функцию attr, чтобы прочитать класс и разделить его. вы получите массив с индексом 1, который будет номером вашего селектора, а затем просто используйте номер для вашего следующего селектора.

      jQuery('[class^=button-]').click(function () {
         let ids=$(this).attr("class").split("-"); 
         jQuery('#cursusmodal').on('shown.bs.modal', function() {
         const dates = jQuery('#cursusnummer'+ids[1]+' li').map((i, li) => 
            jQuery(li).text()).get();           
               //stuff   
             });
          });

Answer 2

Если вы не можете делать мультиселекторы, используя класс, добавьте дополнительный класс ко всем вашим кнопкам, называемым кнопками, например, сделайте:

jQuery('.button').click(function () {
        jQuery('#cursusmodal').on('shown.bs.modal', function() {
            const dates = jQuery(this).find("li").map((i, li) => jQuery(li).text()).get();           
            //stuff    
        });
    });

Answer 3

Вы можете использовать символ ^ для начальной подстроки параметра, иначе вы можете использовать символ $ для конечной подстроки параметра или еще раз вы можете использовать символ * для параметра, который содержит эту подстроку.

Вот пример:

jQuery('[class^=button-]').click(function () {
    jQuery('#cursusmodal').on('shown.bs.modal', function() {
        const dates = jQuery('[id^=cursusnummer] li').map((i, li) => jQuery(li).text()).get();           
        //stuff    
    });

Надеюсь, этот ответ вам подходит