如何基于点击量对HTML列表按热度排序？

开发者阿泽

2026-7-7

实现按点击量排序的政党列表

你已有的HTML和CSS搭建了一个政党卡片网格，下面是添加点击量统计和排序功能的JavaScript实现：

核心逻辑

用对象存储每个政党的点击次数
点击卡片时更新计数并触发排序
按点击次数从高到低重新排列列表项

完整JavaScript代码

// 存储每个政党的点击次数，初始值为0
const clickCounts = {};

// 页面加载完成后初始化点击计数
document.addEventListener('DOMContentLoaded', () => {
  const items = document.querySelectorAll('#Partijensort .grid-item');
  items.forEach(item => {
    clickCounts[item.id] = 0;
  });
});

// 点击计数函数，对应HTML中的onclick事件
function incrementClicks(item) {
  clickCounts[item.id]++;
  sortItemsByClicks();
}

// 按点击量排序列表项的核心函数
function sortItemsByClicks() {
  const list = document.getElementById('Partijensort');
  const itemsArray = Array.from(list.querySelectorAll('.grid-item'));
  
  // 按点击次数降序排序，点击数相同则保留原顺序
  itemsArray.sort((a, b) => clickCounts[b.id] - clickCounts[a.id]);
  
  // 清空原列表，重新插入排序后的项
  list.innerHTML = '';
  itemsArray.forEach(item => list.appendChild(item));
}

使用说明

将这段代码放在HTML的<script>标签中，建议放在</body>标签前，确保DOM加载完成后再执行。
点击任意政党卡片，点击数会自动增加，列表会立即重新排序，点击量最高的卡片排在最前。
若需要页面刷新后保留点击数据，可改用localStorage存储计数，修改如下：

// 从本地存储读取初始数据，无数据则设为空对象
const clickCounts = JSON.parse(localStorage.getItem('clickCounts')) || {};

// 更新计数后同步到本地存储
function incrementClicks(item) {
  clickCounts[item.id] = (clickCounts[item.id] || 0) + 1;
  localStorage.setItem('clickCounts', JSON.stringify(clickCounts));
  sortItemsByClicks();
}