JavaScript数值排序陷阱：解决data-price属性的字符串比较问题

function SortElem(field,li, asc){
    let  dm, sortli;
    dm = asc ? 1 : -1;
    sortli = li.sort((a, b)=>{
        const ax = a.getAttribute('data-price'); // ax 是字符串
        const bx = b.getAttribute('data-price'); // bx 是字符串
        return ax > bx ? (1*dm) : (-1*dm); // 这里进行的是字符串比较
    });
    // ...
}

function SortElem(field, li, asc){
    let dm = asc ? 1 : -1; // 排序方向乘数：1为升序，-1为降序
    let sortli = li.sort((a, b) => {
        // 关键修正：将获取到的字符串属性值转换为数字进行比较
        const ax = Number(a.getAttribute('data-price'));
        const bx = Number(b.getAttribute('data-price'));

        // 进行数值比较：(ax - bx) 会返回负数、零或正数
        // 结合 dm 控制最终的升序或降序
        return (ax - bx) * dm;
    });

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

// 假设HTML结构如下：
// <div class="items">
//   <div class="item" data-price="20"><span class="pop-price">$20</span></div>
//   <div class="item" data-price="5"><span class="pop-price">$5</span></div>
//   <div class="item" data-price="230"><span class="pop-price">$230</span></div>
//   <div class="item" data-price="22"><span class="pop-price">$22</span></div>
//   <div class="item" data-price="25"><span class="pop-price">$25</span></div>
// </div>
// <select id="sortby">
//   <option value="Default">Default</option>
//   <option value="lowtohigh">Price: Low to High</option>
//   <option value="hightolow">Price: High to Low</option>
// </select>

let field = document.querySelector('.items');
let li = []; // 用于存储原始的li元素数组
let ar = []; // 用于存储带有data-price属性的li元素，以便恢复默认顺序

/**
 * 初始化产品数据，提取价格并设置data-price属性，同时保存原始顺序。
 */
function initializeProductData() {
    if (!field) return; // 如果items容器不存在，则退出

    li = Array.from(field.children); // 获取当前items容器中的所有子元素
    ar = []; // 每次初始化前清空，确保是最新状态

    for(let item of li){
        const priceElement = item.querySelector(".pop-price");
        if (priceElement) {
            const priceText = priceElement.textContent.trim();
            // 假设价格前有一个非数字字符（如货币符号），需要去除
            const priceValue = Number(price