实现前端滑块数值与显示文本的动态同步

// 确保在DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    // 1. 获取包含所有筛选器的表单
    let filterForm = document.querySelector("form.filterform");

    // 仅当表单存在时才执行后续逻辑
    if (null !== filterForm) {
        // 2. 设置一个定时器，等待滑块元素完全加载和初始化
        // 某些滑块库可能在DOM加载后异步初始化，此等待机制确保能找到滑块句柄。
        let waitS = setInterval(wait_sliders, 200);

        function wait_sliders() {
            // 检查滑块句柄是否存在，作为滑块初始化完成的标志
            if (null !== filterForm.querySelector(".slider-handle")) {

                // 3. 初始化 MutationObserver
                // 创建一个观察器实例，当观察到的属性发生变化时执行回调函数
                var observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (mutation) {
                        // 确保是属性变化且目标是我们的滑块输入框
                        if (mutation.type === "attributes" && mutation.target.classList.contains('bt-slider')) {
                            // 从变化的input元素的value属性中获取当前值
                            let values = mutation.target.value.split(','); // 例如 "1,4721" -> ["1", "4721"]

                            // 找到当前滑块所在的 .slide 容器
                            let slideContainer = mutation.target.closest('.slide');
                            if (slideContainer) {
                                // 获取容器内的所有 span 标签，通常第一个是最小值，最后一个是最大值
                                let spans = slideContainer.querySelectorAll('span');
                                if (spans.length >= 2) {
                                    spans[0].innerText = values[0]; // 更新最小值
                                    spans[spans.length - 1].innerText = values[1]; // 更新最大值
                                }
                            }
                        }
                    });
                });

                // 4. 对每个滑块输入框应用观察器
                let slides = filterForm.querySelectorAll('.slide');
                slides.forEach(slide => {
                    let el = slide.querySelector('.bt-slider'); // 获取隐藏的滑块input元素
                    if (el) {
                        // 观察该元素的属性变化，特别是 value 属性
                        observer.observe(el, { attributes: true });
                    }
                });

                // 5. 添加事件监听器，在滑块操作后触发表单提交
                // 这部分代码旨在实现当用户与滑块交互（释放句柄）或改变其他输入时自动提交筛选表单
                filterForm.querySelectorAll("input,select,.slider-handle").forEach((e) => {
                    // 对于滑块句柄，监听 mouseup 和 touchend 事件
                    // 对于其他输入/选择框，监听 change 事件
                    let event = e.classList.contains("slider-handle") ? ["mouseup", "touchend"] : ["change"];
                    for (let i = 0; i < event.length; i++) {
                        e.addEventListener(event[i], (e) => {
                            filterForm.querySelector('button[type="submit"]').click(); // 模拟点击提交按钮
                        });
                    }
                });

                // 6. 首次加载时触发一次表单提交，以应用初始筛选条件或更新显示
                filterForm.querySelector('button[type="submit"]').click();

                // 7. 清除定时器，因为滑块已经找到并初始化完毕
                clearInterval(waitS);
            }
        }
    }
});