Question

我有一个dataTable，在每一行中都有一个按钮，单击该按钮将显示另一行。我想给单击的按钮附加一个类。我尝试仅添加一个$('#detailMenuDropdown').addClass('rotate');，但这只是更改了第一个按钮。

我的研究指出我要混合使用它并找到，但仍然无法正常工作。

  $("#complexProcessTable tbody").on('click', '#detailMenuDropdown', function () {
    let table = $("#complexProcessTable").DataTable();
    let tr = $(this).closest('tr');
    let row = table.row(tr);


    if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
        $(this).find('#detailMenuDropdown').removeClass('rotate');
    }
    else {
        row.child(format(row.data())).show();
        tr.addClass('shown');
        $(this).find('#detailMenuDropdown').addClass('rotate');
    }
})
})

Answer 1

id每个元素必须唯一，因此将按钮id="detailMenuDropdown"转换为class="detailMenuDropdown"，然后按如下所示更改代码：

$("#complexProcessTable tbody").on('click', '.detailMenuDropdown', function () {
   //----------------------------------------^use . instead of #
    $(this).toggleClass('rotate'); //toggle class on button
    let table = $("#complexProcessTable").DataTable();
    let tr = $(this).closest('tr');
    let row = table.row(tr);


    if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        row.child(format(row.data())).show();
        tr.addClass('shown');
    }
})

jQuery-每行带有按钮的表格，如何在单击按钮时切换toggleClass？

1 个答案: