如何实现按钮切换功能：点击显示/隐藏后端获取的列表数据

核心是通过状态变量跟踪列表显示状态，点击按钮时根据状态切换“生成列表/清空列表”的行为，同时缓存请求数据避免重复调用后端接口。

修改后的代码 #

const button = document.getElementById('show_countries');
const result = document.getElementById('result');
let isListVisible = false; // 标记列表是否处于显示状态
let cachedCountries = []; // 缓存请求到的数据，避免重复请求

const fetchData = async () => {
    try {
        // 仅在未缓存数据时发起请求
        if (cachedCountries.length === 0) {
            const response = await fetch(`http://localhost:3003/countries`);
            cachedCountries = await response.json();
        }

        if (isListVisible) {
            // 列表已显示，清空容器并切换状态
            result.innerHTML = '';
            isListVisible = false;
            button.textContent = '显示国家列表'; // 可选：更新按钮文字提示当前操作
        } else {
            // 列表未显示，生成列表项并插入容器
            cachedCountries.forEach(country => {
                const listItem = document.createElement('li');
                listItem.textContent = country.name;
                result.appendChild(listItem);
            });
            isListVisible = true;
            button.textContent = '隐藏国家列表'; // 可选：更新按钮文字提示当前操作
        }
    } catch (err) {
        console.error("获取数据失败", err);
    }
};

button.addEventListener("click", fetchData);

关键改动说明 #

• 新增isListVisible状态变量：用来判断当前列表的显示状态，点击按钮时切换状态并执行对应操作
• 新增cachedCountries缓存变量：第一次请求后保存数据，后续切换无需重复调用后端，提升性能
• 优化DOM查询：提前获取result元素，避免每次点击都重复查询DOM
• 分支逻辑处理：根据状态决定是清空列表还是渲染列表，同时可更新按钮文字增强用户体验

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