我正在通过本地JSON填充Categories。类别分布在三个divs
中:“顶部”,“最近添加”和“全部”。有些类别会显示在多个div中。
单击类别会打开一个模态,并且应该出现与每个类别相关的描述。例如。单击“动物”将打开模式,并显示“动物是...的活生物体”等。单击其他类别应显示不同的描述。
我试图以将类别名称附加到模式的相同方式附加val.Description
。单击“顶部”中的类别时,可以从“顶部”中see the descriptions of all of the elements。我还可以从“ New”中看到所有描述,在这些地方我也试图使我的代码正常工作。
当我单击类别时,我要使其成为仅我一次看到该特定类别的描述。关于如何实现这一目标有什么想法?
var testjson = {
"d": {
"results": [{
"Title": "Aardvark",
"Category": "Animals",
"Description": "a-desc",
"TopTrainingCourse": false,
"ID": 1,
"Modified": "2019-03-05T20:13:46Z",
"Created": "2019-03-05T20:13:36Z"
}, {
"Title": "Red Panda",
"Category": "Animals",
"Description": "a-desc",
"TopTrainingCourse": true,
"ID": 10,
"Modified": "2019-03-06T21:08:25Z",
"Created": "2019-03-06T21:08:25Z"
}, {
"Title": "Tennis",
"Category": "Sports",
"Description": "s-desc",
"TopTrainingCourse": true,
"ID": 11,
"Modified": "2019-03-06T21:08:35Z",
"Created": "2019-03-06T21:08:35Z"
}]
}
}
export default class {
constructor() {
}
loadTopCourses() {
let arrTop = testjson.d.results
.filter(x => x.TopTrainingCourse === true)
.filter((el, idx, self) => { // no duplicates
return (idx === self.map(el => el.Category).indexOf(el.Category))
})
.map(x => {
return {
"Category": x.Category,
"Description": x.Description,
"Title": x.Title
}
});
let curIndex = 0;
$.each(arrTop, function(idx, val) {
curIndex++; // this line must be here---if it's moved down the 1st col doesn't show
let targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");
let modalTrigger = $('<div />', {
'class': 'categoryName',
'data-category': val.Category,
'data-target': '#modal-id',
'data-toggle': 'modal',
'text': val.Category
});
targetDiv.append(modalTrigger);
if(curIndex == 4) { // this appends next element to first col
curIndex = 0;
}
})
$('.categoryName').click(function() {
$('.modal-title').text($(this).data('category'));
console.log($(this).data('category'));
});
$.each(arrTop, function(idx, val) {
$(".category-desc").append(val.Description + "<br />")
})
} // ------------------ loadTopCourses
}
<div class="modal fade" id="modal-id" role="dialog" >
<div class="modal-backdrop">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">CLOSE</span> <!-- × -->
</button>
</div>
<div class="modal-body">
<div class="category-desc"></div>
<ul class="training-titles"></ul>
</div>
</div>
</div>
</div> <!-- modal-backdrop -->
</div> <!-- modal fade -->