如何在PHP项目的范围滑块中仅显示存在出版物的年份？

数据老陈

2026-6-24

实现仅支持存在出版物年份的滑块控件

1. 修改PHP代码，获取去重的有效年份数组

从数据库提取所有存在出版物的年份，去重排序后转为JSON格式传递给前端：

// 数据库连接等原有代码保持不变

// 查询所有去重的出版物年份并按升序排序
$query = "SELECT DISTINCT YEAR(data) AS year FROM publicacoes ORDER BY year ASC";
$stmt = $pdo->prepare($query);
$stmt->execute();
$validYears = $stmt->fetchAll(PDO::FETCH_COLUMN);

// 将年份数组转为JSON格式，供JavaScript调用
$validYearsJson = json_encode($validYears);

2. 更新JavaScript逻辑，限制滑块仅选择有效年份

修改滑块处理逻辑，让拖动时自动匹配最近的有效年份，确保选择的都是有出版物的年份：

// 接收PHP传递的有效年份数组
const validYears = <?= $validYearsJson ?>;

function updateSliderValue() {
  const slider = document.getElementById("yearSlider");
  const selectedYearDisplay = document.getElementById("selectedYearDisplay");
  
  // 找到与当前滑块值最接近的有效年份
  const closestYear = validYears.reduce((prev, curr) => {
    return Math.abs(curr - slider.value) < Math.abs(prev - slider.value) ? curr : prev;
  });
  
  // 同步更新滑块值和显示文本
  slider.value = closestYear;
  selectedYearDisplay.innerText = closestYear;
}

// 监听滑块实时拖动事件（比onchange更流畅）
document.getElementById("yearSlider").addEventListener("input", updateSliderValue);

// 页面加载时初始化显示
window.addEventListener("load", updateSliderValue);

3. 调整HTML代码

保留滑块基础属性，初始化值设为有效年份中的最大值：

<input id="yearSlider" type="range" 
  min="<?= $validYears[0] ?>" max="<?= end($validYears) ?>" 
  value="<?= end($validYears) ?>">
<span id="selectedYearDisplay"></span>