jQuery .text()方法无法更新文本 日期选择器值不生效问题

问题的核心是DOM元素选择时机错误：你在页面DOM还未完成渲染时，就执行了var datesBoxes = $(".date-picker-date");代码，此时对应class的div还未被浏览器解析加载，选中的是空jQuery对象，访问datesBoxes[0]自然返回undefined，后续的赋值、更新操作全部失效。

解决方案 #

• 调整变量声明和元素选择逻辑，把DOM元素选择操作放到$(document).ready()回调内部，确保DOM完全加载完成后再执行元素查找
• 初始化dates数组时用当前日期对象替换写死的固定日期，实现页面打开默认显示当日的需求

修正后代码示例 #

HTML 部分

<div id="date-picker-dates">
  <div id="date-picker-date-first" class="date-picker-date">
  </div>
  <div id="date-picker-date-second" class="date-picker-date">
  </div>
</div>

JS 部分

// 全局变量先声明，暂不赋值
var datesBoxes;
// 初始化日期数组，默认第一个为当日，第二个为30天后，可按需调整
var dates = [new Date(), new Date(new Date().setDate(new Date().getDate() + 30))];
var currentDate = 0;

// 所有DOM操作都放到ready回调里，确保DOM加载完成后执行
$(document).ready(function() {
  // 此时DOM已经渲染完成，能正确选中元素
  datesBoxes = $(".date-picker-date");
  console.log(datesBoxes[0]); // 此时会正确输出对应的div元素
  
  // 初始化日期显示
  $(datesBoxes[0]).text(getDateString(dates[0]));
  $(datesBoxes[1]).text(getDateString(dates[1]));
  
  // 日历选择器的绑定逻辑也统一放在此处即可
});

// 日期格式化函数，可按需调整显示格式
function getDateString(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${month}/${day}/${year}`;
}

function updateDateShown() {
  // datesBoxes已经在ready阶段赋值完成，这里可以正常使用
  var formattedDate = getDateString(dates[currentDate]);
  var updateDateBox = $(datesBoxes[currentDate]);
  updateDateBox.text(formattedDate);
}

补充说明 #

如果你的JS脚本引用放在HTML的<head>标签内，也可以直接把脚本移到</body>标签之前，脚本执行时DOM已经渲染完成，也能解决元素选择为空的问题。

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