列表视图与网格视图切换异常：点击列表图标无法切回

问题描述 #

实现了table-section（列表视图）和grid-section（网格视图）两种布局，初始状态下table-section设为display:block显示，grid-section设为display:none隐藏。两个布局的头部均包含列表图标（.fa-solid.fa-list-ul）和网格图标（.iconsax[icon-name='grid-apps']）。点击网格图标可以切换到网格视图，但点击列表图标无法切回列表视图。

故障原因 #

页面中存在两组相同的切换图标（分别在table-section和grid-section内），但JavaScript代码中使用document.querySelector()仅获取了第一个匹配的元素（也就是table-section内的图标），并只为这两个图标绑定了点击事件。

当切换到网格视图后，table-section被设为display:none，此时用户点击的是grid-section内的列表图标——这个图标没有绑定任何事件监听，因此无法触发切回列表视图的逻辑。

修复方案 #

方案一：为所有图标绑定事件 #

使用document.querySelectorAll()选中所有匹配的图标，遍历并为每个图标绑定点击事件：

document.addEventListener("DOMContentLoaded", function () {
    // 获取页面中所有列表图标和网格图标
    const listIcons = document.querySelectorAll(".fa-solid.fa-list-ul");
    const gridIcons = document.querySelectorAll(".iconsax[icon-name='grid-apps']");

    // 为每个列表图标绑定切换到列表视图的事件
    listIcons.forEach(icon => {
        icon.addEventListener("click", function () {
            document.querySelector(".table-section").style.display = "block";
            document.querySelector(".grid-section").style.display = "none";
        });
    });

    // 为每个网格图标绑定切换到网格视图的事件
    gridIcons.forEach(icon => {
        icon.addEventListener("click", function () {
            document.querySelector(".table-section").style.display = "none";
            document.querySelector(".grid-section").style.display = "block";
        });
    });
});

方案二：优化DOM结构，仅保留一套控制图标 #

将切换图标从两个section内部移到外部，只保留一套控制按钮，既简化代码也避免重复元素：

修改后的HTML结构：

<!-- 独立的控制按钮区域 -->
<div class="d-flex align-items-center py-3 px-3">
    <i class="fa-solid fa-list-ul p-2"></i>
    <i class="iconsax p-2" icon-name="grid-apps"></i>
</div>

<section class="section table-section">
    <div class="table-container">
        <div class="table-header">
            <div class="d-flex align-items-center justify-content-between py-3 px-3">
                <div></div> <!-- 空div占位，保持原有布局结构 -->
                <div>
                    <i class="iconsax p-2" icon-name="arrow-up-down"></i>
                </div>
            </div>
        </div>
        <table class="table"> ... </table>
    </div>
</section>

<section class="section grid-section">
    <div class="table-container">
        <div class="table-header">
            <div class="d-flex align-items-center justify-content-between py-3 px-3">
                <div></div> <!-- 空div占位，保持原有布局结构 -->
                <div>
                    <i class="iconsax p-2" icon-name="arrow-up-down"></i>
                </div>
            </div>
        </div>
        <div class="d-flex">
            <div class="col-4 card-grid"> ... </div>
        </div>
    </div>
</section>

对应的JavaScript代码（无需修改，因为现在只有一套图标）：

document.addEventListener("DOMContentLoaded", function () {
    const listIcon = document.querySelector(".fa-solid.fa-list-ul");
    const gridIcon = document.querySelector(".iconsax[icon-name='grid-apps']");

    listIcon.addEventListener("click", function () {
        document.querySelector(".table-section").style.display = "block";
        document.querySelector(".grid-section").style.display = "none";
    });

    gridIcon.addEventListener("click", function () {
        document.querySelector(".table-section").style.display = "none";
        document.querySelector(".grid-section").style.display = "block";
    });
});

内容的提问来源于stack exchange，提问作者ckot