防止将多个元素附加到div

Question

我正在通过本地JSON填充Categories。类别分布在三个divs中：“顶部”，“最近添加”和“全部”。有些类别会显示在多个div中。

单击类别会打开一个模态，并且应该出现与每个类别相关的描述。例如。单击“动物”将打开模式，并显示“动物是...的活生物体”等。单击其他类别应显示不同的描述。

我试图以将类别名称附加到模式的相同方式附加val.Description。单击“顶部”中的类别时，可以从“顶部”中see the descriptions of all of the elements。我还可以从“ New”中看到所有描述，在这些地方我也试图使我的代码正常工作。

当我单击类别时，我要使其成为仅我一次看到该特定类别的描述。关于如何实现这一目标有什么想法？

JS代码段：

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> <!-- &times; -->
            </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 -->