JQuery обратный вызов вне функции с параметрами для динамического изменения содержимого страницы (и как это сделать проще)

Question

Я новичок здесь, так что извините, если я сделал что-то не так

Итак, я пытался создать меню сайта курса. Есть список уроков, и при нажатии он изменит содержание урока. Он загружает соответствующие уроки вместо перезагрузки страницы или изменения URL. Я сделал это так, чтобы мне не приходилось писать каждую страницу урока и добавлять колонтитулы. Гораздо проще.

Так что я искал inte rnet несколько дней, но не смог найти то, что соответствует тому, что я хочу. Итак, я написал это. И я хочу поделиться этим со всеми, кто хочет что-то подобное. Мне нравится jQuery, поэтому я не пользуюсь Js много.

Я хочу спросить:

* Могу ли я сделать это проще и есть другой способ?

Это будет тяжело или вызовет какие-либо проблемы с браузерами? (Я тестировал, но пока выглядит нормально) *

/* Function for loading courses to div */
$(document).ready(function () {

 /* Make the function global for callback outside of the function */
window.buttonLoadCourse = function (id, link) {

 /* Function itself */
$(id).click(function () { 
$(".course-content").load(link);
        });
    }
});
/* Outside callback for loading the courses */
buttonLoadCourse((".lesson149"), ("lesson149.html") )
buttonLoadCourse((".lesson150"), ("lesson150.html") )
buttonLoadCourse((".lesson151"), ("lesson151.html") )

Например:

• Урок 3
• (при нажатии открывается: «Содержание урока 3 в выделенном div»)
• Урок 3: Основы итальянской кухни et c.

Большое спасибо

Answer 1

Придумал лучшее решение:

$('.loadLessonButton').on('click', function (clickEvent) {
  // get the page link from the clicked button
  var clickedButton = clickEvent.currentTarget;
  var link = clickedButton.getAttribute('data-page');
  $('.course-content').load(link);
})

Тогда нам нужно изменить HTML на это:

<button class="loadLessonButton" data-page="lesson149.html">Lesson 149</button>
<button class="loadLessonButton" data-page="lesson150.html">Lesson 150</button>

• Нет необходимости в окне. как мы можем вызывать наши функции внутри элемента
• Некоторые улучшения в именовании параметров
• Добавлены переменные для удобства чтения и использования
• Надеюсь, это поможет некоторым людям