Question

我在Json文件中有不同的“配置文件”。在index.html中，显示了不同的配置文件卡，并填充了Json-File的信息。当您单击Profil（Profil卡）时，将加载详细的profile.html，并执行initateProfile函数。

 $(document).on("click", ".profile-card", function () {
    $('#page-content').load("sections/profile.html", function () {
       initiateProfile($(this).data("profileid"));
    });
 });

我想传输profileid-class的内容，它是Json-File的索引。

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-File的信息。有什么问题吗？

Thx

Answer 1

假设在具有类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"));
  });
});

Answer 2

问题是因为this回调处理程序函数中的load()不是引发事件的元素。它在不同的范围内运行。要解决此问题，您需要将元素引用保存到click处理程序范围内的变量中，并在回调中使用它，如下所示：

$(document).on("click", ".profile-card", function () {
  var profileId = $(this).data('profileid');
  $('#page-content').load("sections/profile.html", function () {
    initiateProfile(profileId);
  });
});

将类名传输到函数

2 个答案: