我有一些div,每个包含一个类别,点击特定的div打开该类别的模式。有数据通过axios进入,我试图将每个类别的描述附加到各自的模态中。
我能够在控制台中看到Descriptions,但由于某种原因,我很难将它们添加到他们的模态中。
console.log(desc)
的屏幕保护程序
axios.get([redacted] + "/getByTitle('Categories')/items?$select=Title,Description,Courses/Title,SortOrder&$expand=Courses&$orderby=Title&$top=1000",
{
method: "GET",
credentials: "include",
mode: "no-cors",
headers: {
"Accept": "application/json; odata=verbose"
}
// irrelevant code
]).then(axios.spread((cat, lib) => {
_categories = cat.data.d.results;
_library = lib.data.d.results;
this.loadCourses();
})).catch(error => {
console.log(error);
});
getPayload(){
return _library;
}
getCategories(){
return _categories;
}
loadCourses(){ // Training Library
let crs = _library
.map(x => {
return {
"Description": x.Description,
"Title": x.Title
}
}).sort();
this.populateCategory(crs, "div.top-training");
}
populateCategory(arrObj, parentTarget){
arrObj = arrObj.filter((v, p) => arrObj.indexOf(v) == p);
$.each(arrObj, function(idx, val) {
let targetDiv = $(parentTarget).hasClass(".cat-box");
let desc = _categories
.filter(x => {
return x.Description
});
console.log(desc)
let modalTrigger = $('<div />', {
'class': '.cat-box',
'data-category': val.Category,
'data-target': '#modal-id',
'data-toggle': 'modal',
'text': val
});
modalTrigger.prepend("<span class='mag-glass'>🔍</span>");
modalTrigger.append("<span style='display:none;'>" + (desc?desc:"") + "</span>");
targetDiv.append(modalTrigger);
});
import AllCoursesComponent from './SiteAssets/scripts/allCourses';
let allComp = new AllCoursesComponent();
$(document).on("click", '.cat-box', function(val) {
console.log('.cat-box clicked')
let cat = $(this).data('category')
desc = $(this).find("p").last().text();
// console.log('desc: ' + desc)
$(".category-desc").empty();
$(".category-desc").append(desc + "<br />");
// irrelevant code
});
<div class="modal" id="modal-id" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-backdrop">
<div class="modal-content">
<div class="modal-img"></div>
<div class="modal-title" id="exampleModalLabel"></div>
<div class="modal-body">
<div class="category-desc">
<p></p>
</div>
<div class="training-titles">
<ul class="training-titles-ul"></ul>
</div>
</div>
</div> <!-- modal-content -->
</div> <!-- modal-backdrop -->
</div>
</div>
更新:
在我的项目中,我将类别标题添加到类别div中的特定方式---我将其排除在此问题之外,因为它似乎不相关,但我尝试使用类别描述重复该过程并最终工作:
let catBoxElems = "";
for (var i = 0; i < categs.length; i++) { // creates divs based on how many categories are present
// the initial category div is cloned:
catBoxElems +=
"<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal' data-desc='" + categs[i].Description + "'data-title='" + categs[i].Title + "'>" + catPic + "<br>" + categs[i].Title + "</div>";
}
$(document).find("#modal-id").off("shown.bs.modal").on("shown.bs.modal", function(e) {
$(document).find(".modal-title").html($(e.relatedTarget).data("title"));
$(document).find(".category-desc").html($(e.relatedTarget).data("desc"));
}).on("hidden.bs.modal", function(e) {
$(document).find(".modal-title").html("");
});
我之前没有真正考虑过因为我不确定它是否会起作用。因此,现在单击“动物”类别会打开模态,并显示“动物”描述。单击其他类别将打开模态并显示该类别的说明。