点击Show Details按钮无法重新渲染页面显示星战角色信息求助

问题原因 #

1. 你定义的isVisible是main函数内的全局变量，所有角色共享同一个状态，且模板字符串是初始化时一次性生成的，修改isVisible的值不会触发页面重新渲染，因此看不到变化。
2. 所有角色共用同一个状态变量，无法实现单个角色独立控制详情显示的需求。

解决方案一：直接操作DOM控制元素显示（简单高效） #

无需依赖模板字符串的条件渲染，初始化时就渲染所有信息，默认隐藏详情，点击按钮时切换显示状态：

const containerEl = document.getElementById("container");
const list = document.createDocumentFragment();
const images = [
    "https://oyster.ignimgs.com/mediawiki/apis.ign.com/star-wars-episode-7/2/2d/Luke.jpg?width=1280",
    "https://images.immediate.co.uk/production/volatile/sites/3/2019/10/EP9-FF-001686-336e75b.jpg?quality=90&resize=980,654",
    "https://hips.hearstapps.com/digitalspyuk.cdnds.net/17/07/1487160686-r2-d2.jpg",
    "https://lumiere-a.akamaihd.net/v1/images/darth-vader-main_4560aff7.jpeg?region=0%2C67%2C1280%2C720",
    "https://www.costumerealm.com/wp-content/uploads/2019/12/51G4Jox9MlL._SX466_.jpg",
    "https://static.wikia.nocookie.net/starwars/images/e/eb/OwenCardTrader.png/revision/latest?cb=20171108050140",
    "https://static.wikia.nocookie.net/fanmade-works/images/8/8d/Beru_Lars.png/revision/latest/scale-to-width/360?cb=20200317025929",
    "https://static.wikia.nocookie.net/star-wars-canon-extended/images/2/23/R5.jpg/revision/latest?cb=20160123232521",
    "https://static.wikia.nocookie.net/starwars/images/0/00/BiggsHS-ANH.png/revision/latest?cb=20130305010406",
    "https://media.gq.com/photos/622919842677fb88bf480855/16:9/w_2143,h_1205,c_limit/Screen%20Shot%202022-03-09%20at%204.15.50%20PM.png"
]

const getData = async () => {
    const res = await fetch("https://swapi.dev/api/people");
    const resData = await res.json();
    const result = resData.results;
    main(result)
}

getData();

const main = (data) => {
    containerEl.innerHTML = "";
    data.map(({ gender, height, name }, i) => {
        // 将详情放在统一容器中，默认隐藏
        const starWars = `
          <img class="images" src=${images[i]}/>
          <button class="btn">Show Details</button>
          <div class="details" style="display: none;">
            <h1 class="starwars">${name}</h1>
            <h3>${gender}</h3>
            <h3>${height}</h3>
          </div>
        `;
        const item = document.createElement("div");
        item.classList.add("items")
        item.innerHTML = starWars;
        const btn = item.querySelector(".btn");
        const details = item.querySelector(".details");
        
        btn.addEventListener("click", () => {
            // 切换详情的显示状态
            details.style.display = details.style.display === "none" ? "block" : "none";
            // 同步切换按钮文本
            btn.textContent = details.style.display === "block" ? "Hide Details" : "Show Details";
        });
        list.appendChild(item);
    });
    containerEl.append(list);
}

说明：

• 把角色详情放在.details容器中，默认通过display: none隐藏。
• 点击按钮时直接修改容器的显示属性，每个角色的详情独立控制，无需重新渲染整个页面，性能更优。
• 同步切换按钮文本，提升交互体验。

解决方案二：状态驱动渲染（理解前端状态管理思路） #

给每个角色维护独立的可见状态，点击按钮更新状态后重新渲染对应项：

const containerEl = document.getElementById("container");
const images = [
    // 图片数组内容同上，省略重复部分
]

const getData = async () => {
    const res = await fetch("https://swapi.dev/api/people");
    const resData = await res.json();
    // 给每个角色添加独立的isVisible状态，初始为false
    const result = resData.results.map(item => ({...item, isVisible: false}));
    render(result);
}

getData();

// 封装渲染函数
const render = (data) => {
    containerEl.innerHTML = "";
    const list = document.createDocumentFragment();
    
    data.map(({ gender, height, name, isVisible }, i) => {
        const starWars = `
          <img class="images" src=${images[i]}/>
          <button class="btn" data-index="${i}">${isVisible ? "Hide Details" : "Show Details"}</button>
          <h1 class="starwars">${isVisible ? name : ""}</h1>
          <h3>${isVisible ? gender : ""}</h3>
          <h3>${isVisible ? height : ""}</h3>
        `;
        const item = document.createElement("div");
        item.classList.add("items")
        item.innerHTML = starWars;
        list.appendChild(item);
    });
    
    containerEl.append(list);
    
    // 给所有按钮绑定点击事件
    document.querySelectorAll(".btn").forEach(btn => {
        btn.addEventListener("click", (e) => {
            const index = parseInt(e.target.dataset.index);
            // 切换对应角色的可见状态
            data[index].isVisible = !data[index].isVisible;
            // 重新渲染列表
            render(data);
        });
    });
}

说明：

• 给每个角色数据添加isVisible属性，确保每个角色有独立的显示状态。
• 点击按钮时找到对应角色的索引，更新状态后调用render函数重新渲染整个列表，实现状态驱动视图更新。
• 按钮文本随状态自动切换，交互更友好。

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