求助：JavaScript实现输入匹配data-letter时隐藏图片的逻辑问题

你的代码存在两个核心问题：

1. 重复ID违反HTML规范：页面中多个元素使用了同一个ID（如choicesIDFExam、imglabelIDFExam），ID必须是页面唯一标识，重复使用会导致选择器行为不可预测，也不利于代码维护。
2. 逻辑覆盖导致状态异常：当前代码在单个输入框触发keyup时，会遍历所有图片标签，将匹配当前输入框值的图片隐藏，不匹配的全部强制显示。这就导致切换到其他输入框时，只要当前输入框的值不等于之前隐藏的图片的data-letter，就会把该图片重新显示出来，这就是你遇到的异常。

第一步：修正HTML结构 #

将所有重复的ID改为class，确保符合HTML规范：

<div class="__wrapContainerExamAR">
  <div class="__imagesContainerIDFExam">
    <div class="__lalagyanImage">
      <label class="imglabelIDFExam" data-letter="a">
        a.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
      <label class="imglabelIDFExam" data-letter="b">
        b.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
      <label class="imglabelIDFExam" data-letter="c">
        c.
        <img src="https://static.thenounproject.com/png/2932881-200.png" />
      </label>
    </div>
  </div>
  <div class="__choicesContainerIDFExam" style="display: flex;flex-direction: column;font-size: 24px;">
    <label>
      <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      1. <span class="choicesAExamML __choicesMLExam">Use for controlling input and output devices with the use of programmable memory.</span>
    </label>
    <label>
      <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      2. <span class="choicesAExamML __choicesMLExam">Use for joining two pieces of metal by deforming one or both of them to hold one another.</span>
    </label>
    <label>
      <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
      3. <span class="choicesAExamML __choicesMLExam">It is usually copper or aluminum, and either solid or stranded in construction.</span>
    </label>
  </div>
</div>

第二步：修改JavaScript逻辑 #

根据你的需求，提供两种可行方案：

方案1：全局匹配——只要有输入框输入对应字母，图片就保持隐藏 #

这个方案下，无论哪个输入框输入了a，a的图片就会隐藏；只有当所有输入框都没有输入a时，a的图片才会重新显示。

// 获取所有输入框和图片标签
const inputs = document.querySelectorAll(".choicesIDFExam");
const imgLabels = document.querySelectorAll(".imglabelIDFExam");

// 定义统一更新图片状态的函数
function updateImageVisibility() {
  // 收集所有输入框的非空值，转为小写实现不区分大小写匹配（可移除toLowerCase()改为严格匹配）
  const inputValues = Array.from(inputs)
    .map(input => input.value.trim().toLowerCase())
    .filter(val => val);

  // 遍历每个图片标签，判断是否需要隐藏
  imgLabels.forEach(imgLabel => {
    const letter = imgLabel.getAttribute("data-letter").toLowerCase();
    if (inputValues.includes(letter)) {
      imgLabel.setAttribute("hidden", true);
    } else {
      imgLabel.removeAttribute("hidden");
    }
  });
}

// 给每个输入框添加input事件监听（比keyup更全面，支持粘贴、输入法输入等场景）
inputs.forEach(input => {
  input.addEventListener("input", updateImageVisibility);
});

方案2：一对一匹配——每个输入框仅控制指定图片 #

如果你希望每个输入框只控制自己对应的图片（比如第一个输入框控制a，第二个控制b，第三个控制c），先给输入框添加data-target属性：

<input type="text" class="choicesIDFExam" data-target="a" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
<input type="text" class="choicesIDFExam" data-target="b" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
<input type="text" class="choicesIDFExam" data-target="c" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>

然后修改JavaScript逻辑：

const inputs = document.querySelectorAll(".choicesIDFExam");

inputs.forEach(input => {
  input.addEventListener("input", function() {
    const targetLetter = this.getAttribute("data-target").toLowerCase();
    const inputValue = this.value.trim().toLowerCase();
    // 找到对应的图片标签
    const targetImgLabel = document.querySelector(`.imglabelIDFExam[data-letter="${targetLetter}"]`);
    if (!targetImgLabel) return;

    // 根据输入值判断是否隐藏
    if (inputValue === targetLetter) {
      targetImgLabel.setAttribute("hidden", true);
    } else {
      targetImgLabel.removeAttribute("hidden");
    }
  });
});

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