Question

我有一些div，每个div都包含一个类别，然后单击特定的div打开该类别的模式。有数据通过axios传入，我正在尝试将每个类别的描述附加到各自的模式中。

我可以在控制台中看到“描述”，但是由于某些原因，我很难将它们附加到其模式中。

console.log(desc)

的屏幕截图

JS代码段：

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'>&#128269;</span>");
       modalTrigger.append("<span style='display:none;'>" + (desc?desc:"") + "</span>");

         targetDiv.append(modalTrigger);
  });

index.js：

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>

Answer 1

更新：

在我的项目中，我以特定的方式将类别标题附加到类别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("");
            });

我之前并没有真正考虑过它，因为我不确定它是否会起作用。因此，例如，现在单击“动物”类别，将打开模式，并显示“动物”描述。单击其他类别将打开模式，并显示该类别的描述。

无法将JSON值附加到模式

JS代码段：

index.js：

模式：

1 个答案: