javascript - 悬停下拉菜单不适用于多列

Question

我一直在尝试让一些 div 悬停在带有复选框的标题下方。我的工作如下: Jsfiddle

initComplete: function(settings, json) {
    let api = new $.fn.dataTable.Api(settings);
    let header = api.column(0).header();
    let originalText = $(header).text();
    let newText = originalText + `<div class="filterOptions" id="FilterStatus">
            <input type="checkbox" id="Status1" data-status="1">
            <label for="Status1">1</label>
            <input type="checkbox" id="Status2" data-status="2">
            <label for="Status2">2</label>
            <input type="checkbox" id="Status3" data-status="3">
            <label for="Status3">3</label>
            <input type="checkbox" id="Status4" data-status="4">
            <label for="Status4">4</label>
        </div>`;
    $(header).html(newText).attr("id", "hover")
}

但是，当我尝试将相同的内容应用于第二个 header 时，只有最后一个 header 似乎应用了下拉列表: Jsfiddle

Answer 1

这是因为您尝试添加多个具有相同名称 initComplete 的属性。在结果中，您覆盖它并且仅处理最后一个。您应该将所有逻辑放入一个 initComplete 属性中:

initComplete: function(settings, json) {
    let api = new $.fn.dataTable.Api(settings);
    let header = api.column(0).header();
    let originalText = $(header).text();
    let newText = originalText + `<div class="filterOptions" id="FilterStatus1">
            <input type="checkbox" id="Status1" data-status="1">
            <label for="Status1">1</label>
            <input type="checkbox" id="Status2" data-status="2">
            <label for="Status2">2</label>
            <input type="checkbox" id="Status3" data-status="3">
            <label for="Status3">3</label>
            <input type="checkbox" id="Status4" data-status="4">
            <label for="Status4">4</label>
        </div>`;
    $(header).html(newText).attr("id", "hover1");

    let header2 = api.column(2).header();
    let originalText2 = $(header2).text();
    let newText2 = originalText2 + `<div class="filterOptions" id="FilterStatus2">
            <input type="checkbox" id="Status1" data-status="1">
            <label for="Status1">1</label>
            <input type="checkbox" id="Status2" data-status="2">
            <label for="Status2">2</label>
            <input type="checkbox" id="Status3" data-status="3">
            <label for="Status3">3</label>
            <input type="checkbox" id="Status4" data-status="4">
            <label for="Status4">4</label>
        </div>`;
    $(header2).html(newText2).attr("id", "hover2")
}

jsFiddle 中的工作示例.