我正在调用一个 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"
}
我不知道我是否以正确的方式理解了这个问题，但我假设您在开始时加载了部分列表，然后只想在需要时加载文章。
因此，我首先将节 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 并以正确的方式绑定点击功能。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句