javascript - 未捕获的TypeError:无法读取未定义的属性“文本”(...)

问题似乎是：

$("#results").append("<div class='list-group'><a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</p></a></div>");

和它的呼唤

page: e.relatedTarget.textContent,

  点击Wikipedia按钮，获取结果，点击结果=应该
  加载其维基百科页面：JSFiddle playground


有以下内容：

$("#wiki").one('click', function(e) {
  var articleName = $(this).data('subject');
  $.getJSON("https://it.wikipedia.org/w/api.php?callback=?", {
    srsearch: articleName,
    action: "query",
    list: "search",
    format: "json"
}, function(data) {
    $("#results ul").empty();
    $("#results ul").append("<h3>Results for <b>" + articleName + "</b></h3>").text();
    $.each(data.query.search, function(i, item) {
      $("#results").append("<div class='list-group'><a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</p></a></div>");
      $("#results div a").attr("href", "#");
     });
     $('.modal').on('show.bs.modal', function (e) {
        $.getJSON("https://it.wikipedia.org/w/api.php?action=parse&format=json&callback=?", {
            page: e.relatedTarget.textContent,
            prop:"text"
        }, function(data) {
            $(".modal-content").html(data.parse.text['*']);
        });
     });
 });
});

虽然这可行，但由于其中包含html，因此我需要上述代码：

$("#wiki").one('click', function(e) {
  var articleName = $(this).data('subject');
  $.getJSON("https://it.wikipedia.org/w/api.php?callback=?", {
    srsearch: articleName,
    action: "query",
    list: "search",
    format: "json"
}, function(data) {
    $("#results ul").empty();
    $("#results ul").append("<h3>Results for <b>" + articleName + "</b></h3>").text();
    $.each(data.query.search, function(i, item) {
      $("#results").append("<a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</a>");
      $("#results div a").attr("href", "#");
     });
     $('.modal').on('show.bs.modal', function (e) {
        $.getJSON("https://it.wikipedia.org/w/api.php?action=parse&format=json&callback=?", {
            page: e.relatedTarget.textContent,
            prop:"text"
        }, function(data) {
            $(".modal-content").html(data.parse.text['*']);
        });
     });
 });
});

最佳答案

问题是e.relatedTarget.textContent为您提供了全文-即标题和说明。您只需要搜索标题即可找到结果。

看一下开发工具中的“网络”选项卡，您将看到响应中出现错误“您指定的页面不存在”。

更改为仅选择h4内容：

page: $(e.relatedTarget).find('h4').text(),

Updated fiddle

关于javascript - 未捕获的TypeError:无法读取未定义的属性“文本”(...)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40528946/