jQuery实现点击“查看全部”按钮克隆商品列表并按字母序展示的开发求助

• 同一“查看全部”按钮被绑定了两个互斥的点击事件，触发时会先后执行显示、隐藏逻辑，最终交互结果完全偏离预期
• 缺失核心需求的实现逻辑：未实现商品节点克隆、全量商品按字母排序的相关处理
• 事件绑定逻辑不合理：将按钮点击事件嵌套在商品容器的ready回调中，易因DOM加载时序不匹配出现事件绑定失效问题
• 未做防重复点击处理，后续逻辑落地后也易出现重复生成DOM的性能问题

按照需求目标调整逻辑流程：

• 页面DOM加载完成后，为“查看全部”按钮绑定单次有效点击事件，增加防重复触发标记
• 触发点击后，提取当前已渲染的所有商品节点，读取每个商品的名称文本作为排序依据
• 将提取到的商品集合按字母顺序排序，重新渲染到原商品容器中
• 检测当前页面的可用剩余空间，将已排序的商品节点克隆后填充到剩余空间位置，直到达到填充要求

修正后的完整代码：

ACC.plp = {
    _autoload: [
        ["hideLinkOnSearchBox", $('.js-hide').length > 0],
        "viewAll"
    ],

    hideLinkOnSearchBox: function () {
        let scroll_top;
        $(window).on('scroll', function() {
            scroll_top = $(this).scrollTop();
            if(scroll_top <= 1000) {
                $('.js-hide').removeClass("d-none");
            } else {
                $('.js-hide').addClass("d-none");
            }
        });
    },

    viewAll: function() {
        $(document).ready(function() {
            const $viewAllBtn = $(".button-row [name=viewALL]");
            const $productContainer = $(".plp-products-container");
            // 防重复触发标记
            let isViewAllTriggered = false;

            $viewAllBtn.on('click', function() {
                if (isViewAllTriggered) return;
                isViewAllTriggered = true;

                // 提取现有商品的名称与节点缓存
                const originalProducts = [];
                $productContainer.find(".product-item").each(function() {
                    const $item = $(this);
                    // 此处选择器需匹配实际商品结构，取用于排序的商品名称
                    const productName = $item.find(".product-name").text().trim().toLowerCase();
                    originalProducts.push({
                        name: productName,
                        element: $item.clone()
                    });
                });

                // 按字母顺序对商品排序
                originalProducts.sort((a, b) => a.name.localeCompare(b.name));

                // 清空容器后渲染排序后的原始商品
                $productContainer.empty();
                originalProducts.forEach(product => {
                    $productContainer.append(product.element);
                });

                // 克隆已排序商品填充页面剩余空间
                const currentDocHeight = $(document).height();
                const viewPortHeight = $(window).height();
                // 计算需要填充的高度差，可根据实际页面调整填充比例
                let remainHeight = Math.max(0, viewPortHeight * 2.5 - currentDocHeight);
                while (remainHeight > 0) {
                    for (const product of originalProducts) {
                        const cloneNode = product.element.clone();
                        $productContainer.append(cloneNode);
                        remainHeight -= cloneNode.outerHeight(true);
                        if (remainHeight <= 0) break;
                    }
                }
            });
        });
    },
}

实现注意点：

• 代码中获取商品名称的DOM选择器需匹配实际页面的商品卡片结构，确保排序依据准确
• 剩余空间的填充高度计算逻辑可根据实际页面布局调整，避免生成过多冗余内容
• 若原有商品卡片绑定了点击、跳转等交互事件，可将克隆方法替换为clone(true)，保留节点上的事件绑定

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