如何使用jQuery实现两个输入框值相等时显示指定DIV？

问题根因 #

代码不生效的核心原因是JavaScript逻辑执行时，页面DOM元素还未完成渲染，你绑定事件的#some1、#some2输入框还不存在于页面中，导致事件绑定失效，无法触发后续的判断显示逻辑。

修复方案 #

方案1：用DOM就绪回调包裹JS逻辑

使用jQuery自带的$(document).ready()方法包裹你的JS代码，确保页面所有DOM加载完成后再执行事件绑定：

$(document).ready(function(){
  $("#some1, #some2").on("keyup change", function(){
    let firstEl = $("#some1"),
        secondEl = $("#some2"),
        conditionalEl = $("#showhide");
        
    if (firstEl.val() == secondEl.val() ) {
      conditionalEl.show();
    } else {
      conditionalEl.hide();
    }
  });
})

方案2：调整JS代码位置

把你的JS代码整体移动到页面</body>标签之前，等所有DOM元素渲染完成后再加载执行JS逻辑，也可以解决绑定失效的问题。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<style>
#showhide {
 display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
 <input type="number" name="some1" id="some1">
 <input type="number" name="some2" id="some2">
 <div id="showhide">The inputs are the same</div>
 <input type="submit">
</form>
<script>
$("#some1, #some2").on("keyup change", function(){
  let firstEl = $("#some1"),
      secondEl = $("#some2"),
      conditionalEl = $("#showhide");
      
  if (firstEl.val() == secondEl.val() ) {
    conditionalEl.show();
  } else {
    conditionalEl.hide();
  }
});
</script>
</body>
</html>

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