动态GIPHY图片页：切换按钮时清空内容的技术实现问询

我懂你现在的困扰——切换不同演员按钮时，旧的图片还留在容器里和新图片混在一起，体验很糟糕。核心问题是你当前只靠容器是否为空来决定加载逻辑，但切换演员时容器已经有内容了，自然不会触发清空操作。

咱们只需要加个小逻辑：跟踪上一次点击的演员，当点击新的不同演员时先清空容器，再加载新内容。具体修改如下：

1. 新增全局变量记录上一次点击的演员 #

在topics数组下方添加一个变量，用来存储最后一次点击的演员名称：

let topics = [
    'Tom Cruise', 'Arnold Schwarzenegger', 'Tom Hanks', 'Chris Hemsworth',
    'Chris Pratt', 'Dwayne Johnson', 'Will Smith', 'Vin Diesel',
    'Pamela Anderson', 'Shahrukh khan', 'Hrithik Roshan'
];
// 新增：跟踪上一次点击的演员
let lastClickedActor = '';

2. 重写displayActorInfo函数的判断逻辑 #

把原来判断容器是否为空的逻辑，改成对比当前点击演员和上一次点击演员是否一致：

function displayActorInfo() {
    var currentActor = $(this).attr('data-name');
    
    // 点击的是新演员：清空容器+加载初始图片
    if (currentActor !== lastClickedActor) {
        $('#actors-view').empty();
        // 加载初始图片（GIPHY默认返回20张，也可以手动加limit参数）
        var queryURL = `https://api.giphy.com/v1/gifs/search?q=${currentActor}&api_key=API_KEY`;
        ajaxCall(queryURL);
        // 更新上一次点击的演员记录
        lastClickedActor = currentActor;
    } else {
        // 同一演员：追加10张新图片（加offset避免重复加载）
        var existingCount = $('#actors-view .giphy').length;
        var queryURL = `https://api.giphy.com/v1/gifs/search?q=${currentActor}&api_key=API_KEY&limit=10&offset=${existingCount}`;
        ajaxCall(queryURL);
    }
}

这里额外加了offset参数，确保每次追加的都是新图片（不然GIPHY会重复返回之前的结果），偏移量直接用当前容器里已有的图片数量就行。

3. 测试验证 #

现在再操作试试：

• 点击任意演员，加载初始图片组
• 重复点击同一演员，每次追加10张全新图片
• 切换到其他演员，容器会立即清空，然后加载新演员的图片
• 重复点击新演员，同样会追加新图片

这样就彻底解决不同演员图片混合的问题啦！

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