Передать имя класса в функцию
У меня есть разные «Профили» в Json-файле. В index.html отображаются различные карточки профиля, которые заполняются информацией из Json-файла. Когда вы нажимаете на профиль (Profil-Card), будет загружен подробный файл profile.html и будет выполнена функция initateProfile.
$(document).on("click", ".profile-card", function () {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(this).data("profileid"));
});
});
Я хочу передать содержимое класса profileid, который является индексом для Json-файла.
function initiateProfile(id) {
var profile_data;
$.getJSON('data/profiles.json', function (data) {
profile_data = data[id];
$('.trn-name').text(profile_data.name);
$('.trn-studies').text(profile_data.studies);
$('.trn-stage').text(profile_data.stage);
});
}
К сожалению, переменная id не определена. Таким образом, функция не может получить информацию о Json-файле. В чем проблема?
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Предполагая, что атрибут data-profileid определен для элемента, который имеет класс .profile-card:
Ваша проблема this.
$(document).on("click", ".profile-card", function () {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(this).data("profileid")); // "this" points to the element with id "page-content"
});
});
Одним из решений было бы использование event.currentTarget:
$(document).on("click", ".profile-card", function (event) {
$('#page-content').load("sections/profile.html", function () {
initiateProfile($(event.currentTarget).data("profileid"));
});
});
Проблема в том, что this в функции обработчика обратного вызова load() не является элементом, вызвавшим событие. Он работает под другой областью действия. Чтобы исправить это, вам нужно сохранить ссылку на элемент в переменной в области действия обработчика click и использовать ее в обратном вызове, примерно так:
$(document).on("click", ".profile-card", function () {
var profileId = $(this).data('profileid');
$('#page-content').load("sections/profile.html", function () {
initiateProfile(profileId);
});
});