未选择日期范围时隐藏指定div问题求助

我仔细看了你的代码，发现几个导致这两个div无法正常隐藏的小问题，咱们一步步来修复：

1. jQuery ID选择器写错了 #

你注释掉的那两行隐藏代码里，$("callratediv").hide()和$("canvas-holder-CT").hide()是错误的——jQuery里用ID查找元素必须加#前缀，不然会把它们当成HTML标签名去搜索，肯定找不到目标元素，所以hide()根本没生效。正确写法应该是：

$("#callratediv").hide();
$("#canvas-holder-CT").hide();

2. 父容器visibility控制的小坑 #

你现在是通过设置父容器contain的visibility:hidden来隐藏所有子元素，但visibility:hidden的特性是元素藏起来但还占着页面位置，而且如果子元素自己设置了visibility:visible，会直接覆盖父元素的隐藏指令。再加上你的canvas-holder-CT和callratediv用了position:absolute，有时候会脱离父容器的样式继承，导致隐藏失效。

更稳妥的方式是改用display:none控制父容器（display:none会让元素彻底消失，不占空间，子元素也会跟着被隐藏）：

// 未选择有效日期时隐藏父容器
document.getElementById('contain').style.display = 'none';
// 日期有效时显示父容器
document.getElementById('contain').style.display = 'block';

3. 给目标div加初始隐藏样式 #

为了确保页面刚加载时这两个div就是隐藏状态，你可以直接在HTML里给它们加初始样式：

<div id="canvas-holder-CT" style="width:46%;float:right;position: absolute; left: 0px; top: 700px; display:none;">
<!-- 原有内容不变 -->
</div>
<div id="callratediv" style="float:right; width: 46%;position: absolute; right: 0px; top: 1000px; display:none;">
<!-- 原有内容不变 -->
</div>

4. 完善变量作用域（额外优化） #

你的start和end变量没有提前声明，会变成全局变量，可能导致后续逻辑出问题，建议在函数开头声明：

$(function() {
  let start, end; // 提前声明变量
  $("#datepicker").datepicker({
    onSelect: function() {
      // 原有逻辑不变
    }
  });
  $("#datepicker2").datepicker({
    onSelect: function() {
      // 原有逻辑不变
    }
  });
});

最终调整后的关键代码 #

把两个datepicker的onSelect事件里的else分支替换成：

else {
  document.getElementById('Alert').style.visibility = 'visible';
  // 隐藏整个父容器，所有子元素都会跟着隐藏
  document.getElementById('contain').style.display = 'none';
  // 如果你想单独控制每个div，也可以用下面的写法：
  // $("#canvas-holder").hide();
  // $("#canvas-holder-keymsg").hide();
  // $("#canvas-holder-CT").hide();
  // $("#callratediv").hide();
}

日期有效时的代码调整为：

if( start!=null && end!=null && end>=start) {
  document.getElementById('Alert').style.visibility = 'hidden';
  document.getElementById('contain').style.display = 'block';
  initial(start, end);
}

这样调整后，就能确保未选择有效日期范围时，canvas-holder-CT和callratediv会被正确隐藏啦。

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