0

我正在调用一个 JSON 文件（sections.json），然后访问数组sections，遍历每个项目并将name值附加到一个li. 我希望给这个li链接（或点击事件）以显示相应部分的文章名称.sectionArticles。要访问特定部分的文章，我必须访问不同的 JSON 文件 (sections/{section id}/articles.json)。我对最后一部分一无所知......有人能指出我正确的方向吗？

到目前为止，这是我当前的代码：

$(function() {

  // URLs
  var  zendeskUrl = 'https://myhelpcenter.zendesk.com/'
  var sectionsUrl = zendeskUrl+'api/v2/help_center/pt-br/sections.json';
  var articlesUrl = zendeskUrl+'api/v2/help_center/pt-br/articles.json?per_page=100';

  $.ajax({
    type: 'GET',
    url: sectionsUrl,
    success: function(data) {
      data.sections.forEach(function(section) {
        $('.sectionsList').append('<li class="sectionName">' + section.name + '</li>');
      })
    },
    error: function() {
      console.log("Error: sectionsUrl");
    }
  })

  $.ajax({
    type: 'GET',
    url: articlesUrl,
    success: function(data) {
      data.articles.forEach(function(article) {
        if (article.promoted == true) {
          $('.promotedList').append('<li class="promotedName">' + article.name + '</li>');
        }
      })
    },
    error: function() {
      console.log("Error: articlesUrl");
    }
  })

})

JSOM 样本：

List ALL Sections: /api/v2/help_center/sections.json

{
   "sections": [
    {
      "id": 115001417087,
      "url": "/api/v2/help_center/sections/115001417087.json",
      "html_url": "/hc/sections/115001417087",
      "category_id": 115000835587,
      "position": 0,
      "sorting": "manual",
      "created_at": "2017-03-22T14:29:48Z",
      "updated_at": "2017-06-13T20:01:01Z",
      "name": "Section 1",
      "description": "",
      "locale": "",
      "source_locale": "",
      "outdated": false
    }
  ],
  "page": 1,
  "previous_page": null,
  "next_page": null,
  "per_page": 30,
  "page_count": 1,
  "count": 8,
  "sort_by": "position",
  "sort_order": "asc"
}

List ALL Articles from Section {id}: /api/v2/help_center/sections/{id}/articles.json */

{
  "count": 9,
  "next_page": null,
  "page": 1,
  "page_count": 1,
  "per_page": 30,
  "previous_page": null,
  "articles": [
    {
      "id": 115008623727,
      "url": "/api/v2/help_center/articles/115008623727.json",
      "html_url": "/hc/articles/115008623727",
      "author_id": 20423232608,
      "comments_disabled": true,
      "draft": false,
      "promoted": false,
      "position": 0,
      "vote_sum": 0,
      "vote_count": 0,
      "section_id": 115001417087,
      "created_at": "2017-06-13T19:46:17Z",
      "updated_at": "2017-06-13T19:59:28Z",
      "name": "Some name",
      "title": "Some title",
      "body": "Some HTML",
      "source_locale": "",
      "locale": "",
      "outdated": false,
      "outdated_locales": [],
      "label_names": []
    }
  ],
  "sort_by": "position",
  "sort_order": "asc"
}
4

1 回答 1

1

我不知道我是否以正确的方式理解了这个问题，但我假设您在开始时加载部分列表，然后仅在请求时才加载文章。

因此，我首先将节 id 存储在节列表中，以便以后可以重用它。

$.ajax({
    type: 'GET',
    url: sectionsUrl,
    success: function(data) {
      data.sections.forEach(function(section) {
        $('.sectionsList').append('<li class="sectionName" data-section-id="' + section.id + '">' + section.name + '</li>'); 
      })
    },
    error: function() {
      console.log("Error: sectionsUrl");
    }
  })

使用.on('click')，您已经进入了正确的方向，但是由于这些部分是在事件绑定发生后生成的，因此您需要事件委托来对您的点击做出反应。你可以在这里阅读更多内容：https ://learn.jquery.com/events/event-delegation/

此外，我添加了 empty() 调用以清除文章列表。如果有以前的结果，您可以将该行移到ajax成功函数中。如果您想保留旧列表，只要没有返回有效响应，就可用性而言，我不会。保留它不会向用户显示正在发生的事情。他们可能会等待片刻，然后一次又一次地点击等等。更好地修改错误函数以在列表中显示某些内容，而不是console.log.

$(".sectionsList").on("click", ".sectionName", function(){
  clickedSectionId = $(this).data("sectionId");
  $('.promotedList').empty(); //clear list of previous results

  articlesUrl = zendeskUrl + 'api/v2/help_center/' + clickedSectionId + '/articles.json?per_page=100';

  $.ajax({
    type: 'GET',
    url: articlesUrl,
    success: function(data) {
      data.articles.forEach(function(article) {
        if (article.promoted == true) {
          $('.promotedList').append('<li class="promotedName">' +   article.name + '</li>');
        }
      })
    },
    error: function() {
      console.log("Error: articlesUrl");
    }
  });
});

我假设您的ajax呼叫是按照您需要的方式设置的。只需专注于存储部分 id 并以正确的方式绑定点击功能。

于 2017-06-21T14:46:58.147 回答