WordPress更新后Filter Slider前端失效 仅后端改码可临时生效

故障背景 #

站点内置了可调整选中图片对比度、饱和度、色相的Filter Slider滤镜滑块组件，此前功能运行完全正常。12月WordPress推送多轮版本更新后，滑块在前端页面无法正常工作。

故障表现 #

• 仅在站点后端编辑模式下，对代码做任意微小改动即可让滑块功能恢复正常：包括调整JavaScript代码位置、在JS代码中输入单个字符再删除，甚至修改同一自定义HTML代码块内其他4段独立JS代码，滑块均可重新生效
• 同一代码块内其余4个非滑块类独立功能无需额外操作即可正常运行

已尝试无效的方案 #

• 调整JS代码相对HTML元素的页面加载位置，上下移动均未修复滑块故障，且JS位置过于靠前还会导致页面其他按钮功能失效
• 尝试添加document.ready()包裹业务逻辑，反而导致滑块完全无法工作

现有相关代码 #

滑块HTML结构 #

<span class="sliders">
    <label class="label1 sliders">Contrast</label>
    <input type="range" min="90" max="120" value="100" step="1" onchange="applyFilter()" data-filter="contrast" data-scale="%"><br>
</span>
<span class="sliders">
    <label class="label2 sliders">Saturation</label>
    <input type="range" min="70" max="200" value="100" step="1" onchange="applyFilter()" data-filter="saturate" data-scale="%"><br>
</span>
<span class="sliders">
    <label class="label3 sliders">Color</label>
    <input type="range" min="-22" max="22" value="0" step="1" onchange="applyFilter()" data-filter="hue-rotate" data-scale="deg"><br>
</span>

原功能JS代码 #

<script type="text/javascript">
var image = document.querySelector('.pic');
var filterControls = document.querySelectorAll('input[type=range]');
function applyFilter() {
    var computedFilters = '';
    filterControls.forEach(function(item, index) {
        computedFilters += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ') ';
    });
    image.style.filter = computedFilters;
};
</script>

故障原因 #

核心问题是WordPress新版本调整了自定义HTML块的脚本加载、解析顺序，原代码存在三个明确问题：

1. 脚本顶层的DOM查询逻辑在脚本加载瞬间立刻执行，前端首屏渲染时，目标.pic图片、滑块元素还没完成解析，要么查询返回null，要么误选中页面上其他非滤镜功能的range输入框，导致逻辑失效
2. 编辑模式下修改代码会触发自定义块重新渲染，此时页面DOM已经全部加载完成，查询能拿到正确的元素，所以功能会临时恢复
3. 之前用document.ready()失效，是因为WordPress默认开启jQuery无冲突模式，全局$对象未挂载，写法错误直接导致脚本报错中断，功能完全失效

修复方案 #

直接替换原有JS代码为以下版本即可，不需要调整HTML结构，也不需要修改代码放置位置（保持在滑块HTML之后即可）：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    function applyFilter() {
        // 每次执行时实时查询目标元素，避免首屏加载时DOM未就绪的查询错误
        const targetImg = document.querySelector('.pic');
        const sliders = document.querySelectorAll('input[type=range][data-filter]');
        // 元素不存在时直接退出，不抛出错误影响其他功能
        if (!targetImg || sliders.length === 0) return;

        let filterStr = '';
        sliders.forEach(function(slider) {
            filterStr += `${slider.dataset.filter}(${slider.value}${slider.dataset.scale}) `;
        });
        targetImg.style.filter = filterStr.trim();
    }

    // 直接通过JS绑定滑块事件，替代内联onchange避免全局函数查找失败
    document.querySelectorAll('input[type=range][data-filter]').forEach(slider => {
        slider.addEventListener('input', applyFilter);
    });

    // 初始化时执行一次，应用默认滤镜值
    applyFilter();
    // 兼容可能残留的内联事件调用
    window.applyFilter = applyFilter;
});
</script>

代码调整点说明：

• 用原生DOMContentLoaded事件替代jQuery的ready方法，不依赖jQuery，不存在版本兼容问题
• 把DOM查询逻辑移到函数内部，每次执行时实时获取元素，彻底解决加载顺序导致的元素查询错误
• 给range选择器增加data-filter属性筛选，避免误选页面其他滑块控件
• 改用input事件绑定，拖动滑块时可以实时预览滤镜效果，不需要等松手才触发
• 增加元素存在性判断，就算元素没加载出来也不会报错影响页面其他功能

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