JavaScript实现两个输入框有值时隐藏对应div的方法咨询

问题原因 #

你原有代码的问题是只校验了当前触发输入事件的那个输入框的内容，没有同时判断另一个输入框的状态。比如你在q1输入了内容隐藏了output，之后清空q2的内容时，代码只会判断q2是空的就直接把output显示出来，完全不管q1还有内容，自然不符合需求。

修复后的代码 #

$(document).ready(function() {
  // 缓存所有要监听的输入框，避免重复查询DOM
  const $checkInputs = $('.q1, .q2');
  $checkInputs.keyup(function() {
    // 校验所有输入框是否全部为空，trim可以排除仅输入空格的情况，不需要可以删掉
    const isAllEmpty = $checkInputs.toArray().every(item => $(item).val().trim() === '');
    // 所有输入框为空就显示output，否则隐藏
    $('.output').toggle(isAllEmpty);
  }).keyup(); // 页面加载时触发一次，保证初始状态正确
});

上面的代码完全覆盖你需要的场景：

• 两个输入框都为空时，output显示
• 任意一个输入框有内容时，output隐藏
• 两个输入框都有内容时，output隐藏

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