本文介绍如何使用原生 JavaScript 和 CSS Grid 的 order 属性，实时统计并按点击频次对政党图标列表进行升序/降序重排，实现“越受欢迎越靠前”的交互效果。
本文介绍如何使用原生 javascript 和 css grid 的 `order` 属性，实时统计并按点击频次对政党图标列表进行升序/降序重排，实现“越受欢迎越靠前”的交互效果。
要实现「按点击量排序」，核心思路是：为每个列表项独立记录点击次数 → 点击时更新计数 → 触发一次基于计数的 DOM 重排。直接操作 order 样式属性是最轻量、无需 DOM 移动的方案，尤其适合 CSS Grid 布局。
✅ 推荐实现（稳定、可扩展、语义清晰）
以下代码在保留你原有 HTML 结构的基础上进行了增强，无需修改 CSS 类名，且支持任意多次点击与自动重排：
<!-- 在页面底部或 <script> 标签中 -->
<script>
// 1. 初始化点击计数器（使用 Map 避免全局污染）
const clickCounts = new Map();
// 2. 点击处理函数：累加计数 + 触发重排
function incrementClicks(element) {
const id = element.id;
const current = clickCounts.get(id) || 0;
clickCounts.set(id, current + 1);
sortGridByClicks();
}
// 3. 主排序逻辑：按点击数降序排列（高点击→靠前），点击数相同时保持原始顺序（稳定排序）
function sortGridByClicks() {
const container = document.getElementById('Partijensort');
const items = Array.from(container.children);
// 按点击数降序，相同点击数时按原始 DOM 顺序（使用索引作为第二排序键）
items.sort((a, b) => {
const countA = clickCounts.get(a.id) || 0;
const countB = clickCounts.get(b.id) || 0;
if (countA !== countB) return countB - countA; // 降序：大数在前
return items.indexOf(a) - items.indexOf(b); // 保持稳定
});
// 4. 批量应用 order 属性（注意：order 值越小越靠前，所以用索引 0,1,2...）
items.forEach((item, index) => {
item.style.order = index;
});
}
// 5. 页面加载后初始化所有 item 的 order（避免首次无序）
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('Partijensort');
Array.from(container.children).forEach((item, i) => {
item.style.order = i;
});
});
</script>⚠️ 注意事项与优化建议
- 不要用 li.style.order -= 1（如答案中所示）：该写法会将 order 设为负数并持续递减，导致数值溢出、排序错乱，且无法反映真实点击量。
- order 是 CSS Grid 属性，仅对 display: grid 容器的直系子元素生效：确保 .grid-container 是父容器，且 .grid-item 是其直接子元素（你的结构完全符合）。
-
持久化需求？ 若需刷新页面后仍保留点击数据，可结合 localStorage：
// 保存（在 incrementClicks 末尾添加） localStorage.setItem('partyClicks', JSON.stringify(Object.fromEntries(clickCounts))); // 加载（在 DOMContentLoaded 中） const saved = localStorage.getItem('partyClicks'); if (saved) Object.entries(JSON.parse(saved)).forEach(([k, v]) => clickCounts.set(k, v)); - 性能提示：对于上百个元素，sort() + forEach 仍非常高效；若未来需动画过渡，可添加 CSS transition: order 0.3s ease 到 .grid-item。
✅ 总结
你只需将上述 <script> 插入 HTML 底部，即可让 #Partijensort 列表根据真实点击热度智能重排——无需引入框架、不破坏现有样式、逻辑清晰易维护。点击越多的政党，越快“浮”到网格前列，真正实现基于用户行为的动态优先级展示。
