JavaScript中按价格排序的常见陷阱：字符串与数字比较的差异及解决方案

function SortElem(field, li, asc){
    let dm; // dm (direction multiplier) is 1 for asc, -1 for desc
    dm = asc ? 1 : -1;
    sortli = li.sort((a, b)=>{
        const ax = a.getAttribute('data-price'); // ax and bx are strings
        const bx = b.getAttribute('data-price');
        console.log(ax,bx);
        console.log(ax > bx  ? (1*dm) : (-1*dm));
        return ax > bx ? (1*dm) : (-1*dm); // Here, string comparison happens
    });
    // ... (rest of the function)
}

function SortElem(field, li, asc){
    let dm;
    dm = asc ? 1 : -1;
    sortli = li.sort((a, b)=>{
        // 将属性值转换为数字进行比较
        const ax = Number(a.getAttribute('data-price'));
        const bx = Number(b.getAttribute('data-price'));

        // 更简洁的数值比较方式
        return (ax - bx) * dm; 
    });

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

// 获取DOM元素
let field = document.querySelector('.items');
let li = Array.from(field.children); // 将HTMLCollection转换为数组以便排序

// 初始化产品数据，并设置data-price属性
function SortProduct() {
    // 假设此处已经有了select元素和li数组
    let ar = [];
    for(let i of li){
        const last = i.querySelector(".pop-price"); // 假设这是显示价格的元素
        const x = last.textContent.trim(); // 获取价格文本，例如 "$25"
        const y = Number(x.substring(1)); // 移除货币符号并转换为数字
        i.setAttribute("data-price", y); // 将数字价格存储为data-price属性（注意：存储时仍为字符串）
        ar.push(i);
    }
    // 初始加载时，如果需要，可以将ar重新添加到field中
    // field.append(...ar); 
}

// 假设存在一个ID为'sortby'的select元素
let select = document.getElementById('sortby');
if (select) { // 确保select元素存在
    select.onchange = sortingValue;
}

// 根据选择值执行排序
function sortingValue(){
    // 确保li数组是最新的，或者在SortProduct中处理
    // 如果li是动态变化的，需要重新获取
    li = Array.from(field.children); // 确保li包含当前所有子元素

    if (this.value === 'Default') {
        // 默认排序：这里假设ar是初始未排序的元素数组
        // 需要确保ar在SortProduct被调用后是完整的
        // 实际应用中，可能需要存储一个原始顺序的备份
        SortProduct(); // 重新初始化data-price属性
        while (field.firstChild) {field.removeChild(field.firstChild);}
        // 这里的ar应该是在SortProduct中构建的初始顺序的数组
        // 如果没有维护初始顺序，'Default'可能需要重新加载数据
        field.append(...li); // 简单地将当前li数组按原始DOM顺序添加回去
    } else if (this.value === 'lowtohigh') {
        SortElem(field, li, true); // 升序
    } else if (this.value === 'hightolow') {
        SortElem(field, li, false); // 降序
    }
}

// 核心排序逻辑函数
function SortElem(field, li, asc){
    let dm; // 方向乘数：1为升序，-1为降序
    dm = asc ? 1 : -1;

    // 使用比较函数对数组进行排序
    let sortli = li.sort((a, b)=>{
        // 关键：将data-price属性值转换为数字进行比较
        const ax = Number(a.getAttribute('data-price'));
        const bx = Number(b.getAttribute('data-price'));

        // 执行数值比较，并根据方向乘数调整结果
        return (ax - bx) * dm;
    });

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

// 页面加载完成后调用初始化函数
document.addEventListener('DOMContentLoaded', () => {
    SortProduct(); // 初始化data-price属性
    // 如果需要初始排序，可以在这里调用sortingValue
    // 例如：sortingValue.call(select);
});

// 注意：console.log(SortElem()) 在这里是无效的，因为SortElem没有返回值，且需要参数。
// 它应该在事件触发时被调用。