Question

我有一些类别标题，每个类别标题都附加到自己的div中。单击任何一个div都会打开一个模式，并且计划还将该类别的标题也添加到该模式中。

最初，我在for循环中拥有标题<p-table #dt> ... <tr> <th *ngFor="let col of columns" [ngSwitch]="col.filterType" class=showOverflow pResizableColumn> ... <p-multiSelect *ngSwitchCase="'DropDown'" [options]="masterSearchTypes" defaultLabel="All" [(ngModel)]="filterDefault" (onChange)="dt.filter($event.value, col.field, 'in' )"></p-multiSelect> </th> </tr> ... </p-table>，但是每个类别的标题都紧挨着附加。一定是由于循环造成的，但是将其移出循环不会加载类别div。

然后我在语句中插入了.append，但它只显示第一个类别标题（在本例中为“动物”）。

是否可以将“类别标题”附加到被单击的任何模式中？我是否可以获取该“类别标题”的索引并附加它，就像我原来的一样？

JS代码段：

.eq(i).append

index.js：

let _library,
    _categories;

getCategories(){ 
    return _categories;
}

loadCategories(){
    let categs = _categories

    let htmlElems = "";
      for (var i = 0; i < categs.length; i++) {
           htmlElems += "<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal'>" + categs[i].Title + "</div>";
           $(".modal-title").eq(i).append(categs[i].Title); // ---------- //
      }

     let container = document.querySelector("div.top-training");
     container.innerHTML = htmlElems;
     console.log(container);

}

模式：

$(document).on("click", '.cat-box', function(val) {
    console.log('.cat-box clicked')
    let cat  = $(this).data('category'),
        desc = $(this).find("span").last().text();

// irrelevant code

Answer 1

您可以尝试以下方法解决此问题。

首先，将数据属性data-title添加到元素.cat-box中以保留标题数据。

htmlElems += "<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal' data-title='"+ categs[i].Title +"'>" + categs[i].Title + "</div>";

当模式打开时，读取标题数据并将其放入.modal-title中，并在关闭时将其置空。

$(document).find('#modal-id').off('shown.bs.modal').on('shown.bs.modal', function (e) {
    $(document).find('.modal-title').html( $(e.relatedTarget).data('title'));
}).on('hidden.bs.modal', function (e) {
    $(document).find('.modal-title').html('');
});

您可以从bootstrap site

查看详细的示例

单击div并将该div的值附加到其中

JS代码段：

index.js：

模式：

1 个答案: