Question

我有一个MVC 5，它通过使用可以展开和折叠的表来模拟树视图。

    <div class="table table-condensed" style="border: 1px; border-collapse:collapse;">
        <table>
            <thead>
                <tr>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @{ int i = 0;}
                @foreach (var item in Model)
                {
                    <tr data-toggle="collapse" data-target=".stephistory_@i" id ="stephistory_@i" style="background-color:cadetblue" >
                        <td class="glyphicon glyphicon-plus" id="icon_@i"></td>
                        <td>@Html.DisplayFor(modelItem => item.ExecutionTime)</td>
                    </tr>
                    foreach (var step in item.JobHistories)
                    {
                        <tr>
                            <td></td>
                            <td class="hiddenRow">
                                <div class="collapse stephistory_@i">@Html.DisplayFor(modelItem => step.ExecutionTime)</div>
                            </td>
                        </tr>
                    }
                    i++;
                }
            </tbody>
        </table>
    </div>

<script>
$(document).ready(function (e) {
    $(document).on('show.bs.collapse', '.collapse', function () {
        $('.collapse.in').collapse('hide');
        $('#' + event.target.id).addClass('glyphicon-minus').removeClass('glyphicon-plus');
    });

    $(document).on('hide.bs.collapse', '.collapse', function () {
        $('#' + event.target.id).addClass('glyphicon-plus').removeClass('glyphicon-minus');
    });
});

这几乎可以工作，但addClass / removeClass只针对表的第一行。如何获取动态创建的ID？

修改

我已更新代码以反映当前情况。此外，还删除了一些表格列，以便于阅读。

Answer 1

使用事件委派：

<script>
    $(document).ready(function (e) {
        $(document).on('show.bs.collapse', '.collapse', function () {
            $('.collapse.in').collapse('hide');
            $('#icon').addClass('glyphicon-minus').removeClass('glyphicon-plus');
        });

        $(document).on('hide.bs.collapse', '.collapse', function () {
            $('#icon').addClass('glyphicon-plus').removeClass('glyphicon-minus');
        });
    });
</script>

还有一些讲座：

<强> Understanding Event Delegation

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

对于您在评论中提出的问题，您可以尝试这样做：

<div data-targetid="@i" class="collapse stephistory_@i">@Html.DisplayFor(modelItem => step.ExecutionTime)</div>

<script>
    $(document).ready(function (e) {
        $(document).on('show.bs.collapse', '.collapse', function () {
            $('.collapse.in').collapse('hide');
            $(this).find('td').first().addClass('glyphicon-minus').removeClass('glyphicon-plus');
        });

        $(document).on('hide.bs.collapse', '.collapse', function () {
            var targetId = $(this).data("targetid");
            $("#icon_" + targetId).addClass('glyphicon-plus').removeClass('glyphicon-minus');
        });
    });
</script>

在表格折叠上更改Glyphicon

1 个答案: