JavaScript中基于data-price属性的正确数值排序指南

document.addEventListener('DOMContentLoaded', () => {
    const field = document.querySelector('.items');
    // 将HTML集合转换为数组，以便进行排序操作
    let li = Array.from(field.children); 

    const select = document.getElementById('sortby');
    // 存储初始顺序，以便在选择“默认”时恢复
    let originalOrder = [...li]; 

    /**
     * 准备产品数据，提取价格并设置data-price属性为数值
     */
    function prepareProductsForSorting() {
        li.forEach(item => {
            const priceSpan = item.querySelector(".pop-price");
            if (priceSpan) {
                const priceText = priceSpan.textContent.trim();
                // 移除货币符号（如'$'），并转换为数字
                const priceValue = Number(priceText.substring(1)); 
                // 将数值存储在data-price属性中
                item.setAttribute("data-price", priceValue);
            }
        });
    }

    // 在页面加载时调用一次，准备数据
    prepareProductsForSorting();

    // 绑定排序选择器的change事件
    select.onchange = sortingValue;

    /**
     * 根据选择器的值执行相应的排序操作
     */
    function sortingValue() {
        if (this.value === 'Default') {
            // 恢复到初始顺序
            while (field.firstChild) { field.removeChild(field.firstChild); }
            field.append(...originalOrder);
            // 确保li数组也反映当前DOM的顺序
            li = [...originalOrder]; 
        } else if (this.value === 'lowtohigh') {
            // 从低到高排序
            sortElements(field, li, true);
        } else if (this.value === 'hightolow') {
            // 从高到低排序
            sortElements(field, li, false);
        }
    }

    /**
     * 核心排序函数，根据data-price属性进行数值排序
     * @param {HTMLElement} container - 包含商品的DOM容器
     * @param {Array<HTMLElement>} itemsList - 待排序的商品元素数组
     * @param {boolean} ascending - 是否升序排列 (true为升序，false为降序)
     */
    function sortElements(container, itemsList, ascending) {
        const directionMultiplier = ascending ? 1 : -1;

        itemsList.sort((a, b) => {
            // 获取data-price属性值，此时它们已经是字符串形式的数字
            const priceA_str = a.getAttribute('data-price');
            const priceB_str = b.getAttribute('data-price');

            // 关键步骤：将字符串转换为数字进行比较
            const priceA = Number(priceA_str);
            const priceB = Number(priceB_str);

            // 使用数值差进行比较，乘以方向乘数以控制升序/降序
            return (priceA - priceB) * directionMultiplier;
        });

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

<div class="items">
    <div class="item">
        <span class="pop-price">$5</span>
    </div>
    <div class="item">
        <span class="pop-price">$20</span>
    </div>
    <div class="item">
        <span class="pop-price">$22</span>
    </div>
    <div class="item">
        <span class="pop-price">$25</span>
    </div>
    <div class="item">
        <span class="pop-price">$230</span>
    </div>
</div>

<select id="sortby">
    <option value="Default">默认排序</option>
    <option value="lowtohigh">价格从低到高</option>
    <option value="hightolow">价格从高到低</option>
</select>