如何实现Portfolio网站翻转卡片点击时仅保持一张处于翻转状态

你只需要修改script.js中的翻转逻辑即可，无需调整HTML和CSS代码，修改后的完整JS代码如下：

const cards = document.querySelectorAll(".card__inner");

function flipCard() {
    // 遍历所有卡片，把除当前点击卡片外的其余卡片全部翻回正面
    cards.forEach(card => {
        if (card !== this) {
            card.classList.remove('is-flipped');
        }
    });
    // 切换当前点击卡片的翻转状态
    this.classList.toggle('is-flipped');
};

cards.forEach((card) => card.addEventListener("click", flipCard));

逻辑说明 #

• 每次点击卡片时，先清空除当前点击卡片外所有卡片的is-flipped类，保证同一时间最多只有一张卡片处于翻转状态
• 再切换当前点击卡片的翻转状态：如果点击的是正面卡片就翻到背面，如果点击的是已经翻转的背面卡片就翻回正面，符合正常交互习惯

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