JavaScript数值排序陷阱：避免字符串比较导致错误排序

const ax = a.getAttribute('data-price');
const bx = b.getAttribute('data-price');

function SortElem(field, li, asc) {
    let dm; // Direction Multiplier
    dm = asc ? 1 : -1; // 1 for ascending, -1 for descending

    // 使用Array.prototype.sort()方法进行排序
    const sortli = li.sort((a, b) => {
        // 获取data-price属性值，并显式转换为数字
        const ax = Number(a.getAttribute('data-price'));
        const bx = Number(b.getAttribute('data-price'));

        // 核心比较逻辑：数值相减
        // 对于升序 (ax - bx): 如果ax > bx，结果为正；如果ax < bx，结果为负。
        // 对于降序 (bx - ax): 如果bx > ax，结果为正；如果bx < ax，结果为负。
        // 通过dm（方向乘数）来统一升序和降序逻辑
        return (ax - bx) * dm;
    });

    // 清空父容器，然后重新添加排序后的元素
    while (field.firstChild) {
        field.removeChild(field.firstChild);
    }
    field.append(...sortli);
}

let field = document.querySelector('.items');
// 假设 .items 内部有多个 .item 元素，每个包含 .pop-price
// 为演示方便，这里模拟一些初始DOM结构
if (!field) {
    field = document.createElement('div');
    field.className = 'items';
    document.body.appendChild(field);
    const initialPrices = [5, 20, 22, 25, 230, 10]; // 模拟数据
    initialPrices.forEach((price, index) => {
        const item = document.createElement('div');
        item.className = 'item';
        item.innerHTML = `<span class="pop-price">$${price}</span> Item ${index + 1}`;
        field.appendChild(item);
    });
}

let li = Array.from(field.children); // 获取所有子元素
let ar = []; // 用于存储原始顺序的元素

// 初始化函数，提取价格并设置data-price属性
function SortProduct() {
    // 确保ar在SortProduct被调用时被正确初始化或更新
    ar = []; 
    for(let i of li){
        const last = i.querySelector(".pop-price");
        const x = last.textContent.trim(); // 例如 "$25"
        const y = Number(x.substring(1)); // 转换为数字 25
        i.setAttribute("data-price", y); // 存储为字符串 "25"
        ar.push(i); // 存储原始顺序
    }
}

// 首次加载时调用，设置data-price并保存原始顺序
SortProduct();

let select = document.getElementById('sortby');
// 如果select不存在，创建并添加到body
if (!select) {
    select = document.createElement('select');
    select.id = 'sortby';
    select.innerHTML = `
        <option value="Default">Default</option>
        <option value="lowtohigh">Price: Low to High</option>
        <option value="hightolow">Price: High to Low</option>
    `;
    document.body.insertBefore(select, field);
}

select.onchange = sortingValue;

function sortingValue(){
    if (this.value === 'Default') {
        // 恢复到原始顺序
        while (field.firstChild) {field.removeChild(field.firstChild);}
        field.append(...ar);    
    }
    if (this.value === 'lowtohigh') {
        SortElem(field, li, true); // 升序
    }
    if (this.value === 'hightolow') {
        SortElem(field, li, false); // 降序
    }
}

function SortElem(field, li, asc){
    let dm; // Direction Multiplier
    dm = asc ? 1 : -1; // 1 for ascending, -1 for descending

    const sortli = li.sort((a, b) => {
        // 关键修正：在比较前将属性值转换为数字
        const ax = Number(a.getAttribute('data-price'));
        const bx = Number(b.getAttribute('data-price'));

        // 使用数值相减的方式进行比较，结合方向乘数dm
        return (ax - bx) * dm;
    });

    // 清空父容器，然后重新添加排序后的元素
    while (field.firstChild) {field.removeChild(field.firstChild);}
    field.append(...sortli);    
}

// 页面加载后执行一次默认排序或显示
sortingValue.call(select); // 模拟select的change事件