纯原生JS项目过滤器：innerHTML仅在奇数项目数时更新的问题求助

核心问题 #

你的代码依赖按钮的innerHTML内容和highlight变量双重判断状态，当项目数为偶数时，highlight变量的状态可能未同步为"no"，导致无法触发按钮文本更新逻辑。另外，通过DOM内容判断状态本身就不可靠，容易出现异常。

修改后的代码 #

// 初始化状态：默认显示选中作品
let showSelected = true;
// 替换成你实际的按钮和索引容器选择器
const highlighter = document.querySelector('.highlighter');
const index = document.querySelector('.index-container');

// 初始设置按钮文本，避免硬编码到HTML
highlighter.textContent = "selected works";

highlighter.addEventListener("click", function() {
    // 切换状态
    showSelected = !showSelected;
    
    // 更新按钮文本
    highlighter.textContent = showSelected ? "selected works" : "all works";
    
    // 切换项目可见性
    index.classList.toggle("visibility");
    
    // 同步highlight变量（根据你的业务逻辑调整，确保状态一致）
    highlight = showSelected ? "no" : "yes";
});

关键优化点 #

• 新增showSelected独立状态变量，专门跟踪当前显示模式，彻底脱离对DOM内容的依赖，状态判断更准确
• 点击事件中直接切换状态，再同步更新按钮文本和项目可见性，逻辑清晰，避免条件判断冲突
• 用textContent替代innerHTML，更安全（无需解析HTML），也能满足文本更新需求

原代码奇偶差异原因 #

原代码同时依赖highlighter.innerHTML.includes("all works")和highlight === "no"两个条件，当项目数为偶数时，highlight变量的状态可能未正确同步为"no"，导致进入else分支，无法执行文本更新逻辑。改用独立状态变量后，完全避免了这种状态不同步的问题。

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