将滑块数值与显示文本同步的JavaScript教程

<form action="" method="GET" class="filterform form-inline">
    <div class="form-group">
        <label for="price7068" class="control-label">Nach Preis</label>
        <div class="slide">
            <span>1</span> <!-- 静态最小值显示 -->
            <div class="slider slider-horizontal" id="">
                <!-- 滑块组件的内部结构 -->
            </div>
            <input id="price7068" name="price" data-slider-label=" €" type="text" class="bt-slider" value="1,4721"
                   data-slider-min="1" data-slider-max="10000" data-slider-step="10" data-slider-value="[1,10000]"
                   data-value="1,4721" style="display: none;">
            <span>10000</span> <!-- 静态最大值显示 -->
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- 其他筛选器，例如评级滑块 -->
    <div class="form-group">
        <label for="product_rating4028" class="control-label">Nach Bewertung</label>
        <div class="slide">
            <span>0</span>
            <div class="slider slider-horizontal" id="">
                <!-- 滑块组件的内部结构 -->
            </div>
            <input id="product_rating4028" name="product_rating" data-slider-label=" Sterne" type="text"
                   class="bt-slider" value="1,5" data-slider-min="0" data-slider-max="5" data-slider-step="0.5"
                   data-slider-value="[0,5]" data-value="1,5" style="display: none;">
            <span>5</span>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- 提交按钮 -->
    <button type="submit" class="btn btn-at">Filtern</button>
</form>

let filterForm = document.querySelector("form.filterform");

if (null !== filterForm) {
    // 使用 setInterval 等待滑块元素完全加载和初始化
    let waitS = setInterval(wait_sliders, 200);

    function wait_sliders() {
        // 检查滑块手柄是否存在，确认滑块已渲染
        if (null !== filterForm.querySelector(".slider-handle")) {

            // 1. 监听滑块值变化并更新显示
            let slides = filterForm.querySelectorAll('.slide');
            // 创建一个 MutationObserver 实例，用于观察 DOM 属性变化
            var observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    // 确保是 attributes 类型的变化，且目标是 input.bt-slider
                    if (mutation.type === "attributes" && mutation.attributeName === "value") {
                        let values = mutation.target.value.split(','); // 获取滑块的当前值（例如 "1,4721"）并分割
                        let spans = mutation.target.closest('.slide').querySelectorAll('span'); // 找到当前滑块容器内的所有 span 标签

                        // 更新第一个 span（最小值）和最后一个 span（最大值）的文本
                        if (spans.length > 0) {
                            spans[0].innerText = values[0]; // 更新最小值
                        }
                        if (spans.length > 1) { // 确保有第二个span
                            spans[spans.length - 1].innerText = values[1]; // 更新最大值
                        }
                    }
                });
            });

            // 为每个滑块的隐藏输入框 (input.bt-slider) 注册 MutationObserver
            slides.forEach(slide => {
                let el = slide.querySelector('.bt-slider');
                if (el) {
                    // 观察 input.bt-slider 元素的 attributes 变化
                    observer.observe(el, { attributes: true });
                }
            });

            // 2. 为滑块操作添加事件监听器以触发表单提交
            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();
                    });
                }
            });

            // 3. 初始化时触发一次表单提交，以确保初始状态正确（如果需要）
            filterForm.querySelector('button[type="submit"]').click();

            // 清除等待定时器，因为滑块已找到并处理
            clearInterval(waitS);
        }
    }
}