浏览器换装游戏：避免切换标签时已移动的.clothes元素被隐藏

核心思路是用自定义CSS类替代行内!important样式（行内!important难以移除，维护性差），通过标记被移动的元素，在标签切换时强制显示它们，重置时清除标记并恢复初始状态。

1. 添加CSS强制显示规则 #

在样式表中新增一个类，用来强制元素保持显示：

.force-visible {
  display: block !important;
}

2. 标记被移动的服装元素 #

当用户把.clothes元素拖动到娃娃身上时，给该元素添加moved类作为标记（放到你的拖动结束逻辑里）：

// 示例：拖动完成后执行的逻辑
function onClothesDragEnd(clothesElement) {
  clothesElement.classList.add('moved');
}

3. 修改openTab标签切换逻辑 #

切换标签时，先隐藏所有服装，再给标记了moved的元素添加force-visible类，强制它们不被隐藏：

function openTab(tabName) {
  // 隐藏所有服装元素
  const allClothes = document.querySelectorAll('.clothes');
  allClothes.forEach(item => {
    item.style.display = 'none';
    // 对已移动到娃娃身上的元素强制显示
    if (item.classList.contains('moved')) {
      item.classList.add('force-visible');
    }
  });

  // 显示当前标签下的服装
  const currentTabClothes = document.querySelectorAll(`.clothes.${tabName}`);
  currentTabClothes.forEach(item => {
    item.style.display = 'block';
  });
}

4. 重置按钮逻辑 #

点击重置时，移除所有标记类和强制显示类，同时恢复元素的初始位置：

// 页面加载时先保存所有服装的初始位置
document.addEventListener('DOMContentLoaded', () => {
  const allClothes = document.querySelectorAll('.clothes');
  allClothes.forEach(item => {
    // 把初始位置存在data属性中，方便后续恢复
    const computedStyle = window.getComputedStyle(item);
    item.dataset.originalLeft = computedStyle.left;
    item.dataset.originalTop = computedStyle.top;
  });
});

// 绑定重置按钮点击事件
document.querySelector('.reset-btn').addEventListener('click', () => {
  const allClothes = document.querySelectorAll('.clothes');
  allClothes.forEach(item => {
    // 移除标记类和强制显示类
    item.classList.remove('moved', 'force-visible');
    // 恢复初始位置
    item.style.left = item.dataset.originalLeft;
    item.style.top = item.dataset.originalTop;
    // 重置display为默认状态
    item.style.display = '';
  });
});

为什么不用行内!important？ #

行内样式的!important优先级极高，后续很难通过常规方式覆盖或移除，而用CSS类的方式，添加/移除操作更灵活，也符合代码可维护性的要求。

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