如何修改jQuery脚本实现点击复选框仅显示周末日期条目

原有代码仅能切换隐藏过去日期，存在toggleClass状态混乱、未整合周末判断逻辑的问题，以下是可直接运行的修改方案。

核心实现逻辑 #

• 点击复选框时先获取当前勾选状态，避免判断逻辑错位
• 遍历每个日期条目时，统一做两层规则校验：
  • 基础规则：条目日期为今日或未来日期，过去日期始终隐藏
  • 附加规则：如果复选框为勾选状态，条目日期必须为周六（getDay() === 6）或周日（getDay() === 0）
• 放弃原有的无状态toggleClass写法，根据校验结果明确给条目加/移除隐藏类，避免多次点击后显示状态错乱

可直接替换的JS代码 #

原有CSS、HTML代码无需改动，直接替换原有JS逻辑即可：

$('#basicform_checkbox_2').click(function() {
  // 获取复选框当前选中状态
  const weekendOnlyChecked = $(this).prop('checked');
  // 初始化今日日期，统一归零时间部分避免日期比较误差
  const today = new Date();
  today.setHours(0, 0, 0, 0);

  $('.div1').each(function() {
    const $currentItem = $(this);
    // 解析当前条目对应的日期，去除文本前后空格避免解析失败
    const eventDate = new Date($currentItem.text().trim());
    eventDate.setHours(0, 0, 0, 0);

    // 校验是否为未来/今日日期
    const isFutureDate = eventDate >= today;
    // 校验当前条目日期是否为周末
    const isWeekend = eventDate.getDay() === 0 || eventDate.getDay() === 6;

    // 最终显示判定：满足未来日期 + 勾选周末时需同时满足周末条件
    const needShow = isFutureDate && (weekendOnlyChecked ? isWeekend : true);

    // 明确设置显示/隐藏状态
    $currentItem.toggleClass('toggle', !needShow);
  });
});

之前尝试代码的问题说明 #

你写的周末判断语法本身没有错误，整合失败的核心原因有3个：

• 周末判断调用的是new Date()（当前系统时间）的getDay()，而不是每个日期条目对应时间的getDay()，判断对象完全错误
• 用无状态的toggleClass切换类，没有基于明确的判定结果设置类，多次点击后会出现显示状态反转的bug
• 没有把「未来日期校验」和「周末校验」做逻辑与关联，两个条件需要同时满足才符合显示要求

测试提示 #

你原有示例中的测试日期全部为2022年的过去日期，测试时请替换为当前年份的未来日期，否则所有条目都会被判定为过去日期隐藏，无法看到周末筛选效果。

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