为何JavaScript无法为指定span id应用特定.class类？

你的代码无法生效的核心原因是：父元素<span class="blur-filter-on">应用模糊滤镜后，内部所有子元素（包括#hint-ru和#hint-en）都会被父元素的模糊效果覆盖。子元素单独设置filter: blur(0)无法抵消父元素的滤镜——父元素滤镜作用于整个容器及内容，子元素滤镜是叠加而非抵消关系。

需要调整HTML结构，将模糊效果仅应用到需要保持模糊的文本部分，让hint元素独立出来；同时微调CSS和JS实现预期动画效果。

1. 修改HTML结构 #

拆分原包裹整个文本的模糊容器，只给非hint的文本添加模糊类：

<div class="quote">
  <span class="blur-filter-on">“</span>
  <span id="hint-ru" class="blur-filter-on">This is</span>
  <span class="blur-filter-on">&nbsp;the example of text”</span>
</div>
<div class="quote-en">
  <span class="blur-filter-on">“</span>
  <span id="hint-en" class="blur-filter-on">Das ist</span>
  <span class="blur-filter-on">&nbsp;the example of text”</span>
</div>

<a class="hint-button" href="#" onclick="showHint('hint-ru', 'hint-en')">HINT</a>

2. 优化CSS动画 #

给blur-filter-off添加forwards属性，确保动画结束后保持清晰状态：

.blur-filter-on {
  filter: blur(0.35em);
}

.blur-filter-off {
  animation-name: blur-decrease;
  animation-timing-function: ease;
  animation-duration: 1s;
  animation-fill-mode: forwards; /* 动画结束后保留最终清晰状态 */
}

@keyframes blur-decrease {
  from {
    filter: blur(0.35em);
  }
  to {
    filter: blur(0);
  }
}

3. 调整JavaScript逻辑 #

同步切换hint元素的模糊类，实现点击切换清晰/模糊状态：

function showHint(hintRuId, hintEnId) {
  const hintRu = document.getElementById(hintRuId);
  const hintEn = document.getElementById(hintEnId);

  if (hintRu) {
    hintRu.classList.toggle("blur-filter-on");
    hintRu.classList.toggle("blur-filter-off");
  }
  if (hintEn) {
    hintEn.classList.toggle("blur-filter-on");
    hintEn.classList.toggle("blur-filter-off");
  }
}

• 初始状态：所有文本（包括hint）均为模糊状态；
• 点击HINT按钮：#hint-ru和#hint-en播放模糊消失动画，最终保持清晰，其余文本维持模糊；
• 再次点击：hint文本重新变回模糊状态。

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