求助：如何通过下拉选择基于data-attribute对div列表排序

我看了你写的排序代码，发现几个小细节没处理好，导致功能跑不起来，咱们来一步步修正它：

原代码的问题点 #

• 条件判断里写的是value == 'date'，但排序逻辑却是按data-followers，完全不匹配，这会导致只有选“date”的时候才会执行排序，而且还是按粉丝数排，逻辑混乱
• 变量boxOrdered只在if分支里定义，如果用户选了其他选项，这个变量就不存在，赋值给#influencer的时候会直接报错
• 排序函数的写法有点绕，不如直接用数值相减或者字符串比较来得直观

修正后的完整代码 #

$("#sorter").change(function() {
  // 直接获取下拉框选中的排序键，简化写法
  const sortKey = $("#sorter").val();
  // 缓存所有要排序的box元素，避免重复查DOM
  const $boxes = $('.influencer .box');

  // 执行排序逻辑
  const $sortedBoxes = $boxes.sort(function(a, b) {
    // 根据选中的键获取对应的data属性值
    let valA = $(a).data(sortKey);
    let valB = $(b).data(sortKey);

    // 处理数值类型的排序（比如粉丝数followers）
    if (!isNaN(valA) && !isNaN(valB)) {
      // 这里是降序排列，想要升序就改成 valA - valB
      return valB - valA;
    }

    // 处理字符串/日期类型的排序（比如发布日期date）
    // 降序排列，升序就换成 valA.localeCompare(valB)
    return valB.localeCompare(valA);
  });

  // 把排序后的元素重新插入容器
  $("#influencer").html($sortedBoxes);
});

关键优化说明 #

1. 统一排序键管理：不用写一堆if-else分支，只要下拉框选项的value和你的data属性名完全对应（比如选项value是followers对应data-followers），以后加新的排序项（比如data-likes），只需要在下拉框加个选项就行，不用改JS逻辑
2. DOM查询缓存：提前把所有box元素存起来，避免每次排序都重新查一遍页面，提升性能
3. 兼容不同数据类型：区分数值和字符串/日期的排序逻辑，确保粉丝数（数字）和日期（字符串）都能正确排序
4. 修复变量作用域：不管用户选什么选项，$sortedBoxes都有值，不会出现未定义的报错

额外注意事项 #

如果你的日期是特殊格式（比如MM/DD/YYYY），直接用localeCompare可能排序不准确，这时候可以把字符串转成Date对象再比较：

// 针对日期格式的特殊处理示例
if (sortKey === 'date') {
  valA = new Date(valA);
  valB = new Date(valB);
  return valB - valA; // 降序，升序则反过来
}

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