WordPress网站中如何在PHP脚本环境下调用JavaScript类？

问题说明 #

在WordPress开发网站时，引入的main.js文件中，普通的滚动拖拽事件函数能正常工作，但其中的Parallax类无法被访问调用，导致视差效果无法触发。

原代码问题分析 #

1. HTML模板语法错误：非移动端的img标签存在语法错误，多余的?>破坏了标签结构，导致元素无法被正确识别。
2. Parallax类未初始化：仅定义了类，但没有触发类的实例化代码，且bind方法是实例方法，无法直接通过类调用。
3. DOM加载时机问题：即使写了初始化代码，若未等待DOM完全加载就执行，会找不到目标元素。

修正步骤 #

1. 修复PHP模板中的HTML语法错误

原模板里的非移动端img标签有多余的?>，修正后：

<?php
if(get_field('test')) { ?>
    <section>
        <div class="overflow-h" id="parallaxContainer">
            <?php if ( wp_is_mobile() ) {?>
                <img class="full-img">
            <?php } else { ?>
                <img class="full-img" data-parallax="0.2" id="target">
            <?php } ?>
        </div>
    </section>
<?php } ?>

2. 修改main.js，完善Parallax类并添加初始化逻辑

将bind改为静态方法，同时添加DOM加载完成后的初始化代码，确保能正确实例化Parallax类：

const scrollContainer = document.querySelector("main");

let isDown = false;
let startX;
let scrollLeft;

// 滚动拖拽逻辑（保留原正常工作的代码）
scrollContainer.addEventListener('mousedown', (e) => {
    isDown = true;
    startX = e.pageX - scrollContainer.offsetLeft;
    scrollLeft = scrollContainer.scrollLeft;
});

scrollContainer.addEventListener('mouseleave', () => {
    isDown = false;
});

scrollContainer.addEventListener('mouseup', () => {
    isDown = false;
});

scrollContainer.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - scrollContainer.offsetLeft;
    const walk = (x - startX)/10;
    scrollContainer.scrollLeft = scrollLeft - walk;
});

class Parallax {
    constructor(element) {
        this.element = element;
        this.parallaxFactor = parseFloat(element.dataset.parallax);
        this.onScroll = this.onScroll.bind(this);
        document.addEventListener('scroll', this.onScroll);
        // 初始化时执行一次，避免初始位置异常
        this.onScroll();
    }

    onScroll() {
        // 补全视差逻辑，示例：根据滚动位置垂直移动元素
        const scrollTop = window.scrollY;
        const translateY = scrollTop * this.parallaxFactor;
        this.element.style.transform = `translateY(${translateY}px)`;
    }

    // 改为静态方法，允许直接通过类调用
    static bind() {
        return Array.from(document.querySelectorAll("[data-parallax]")).map(
            (element) => new Parallax(element)
        );
    }
}

// 等待DOM加载完成后初始化Parallax
document.addEventListener('DOMContentLoaded', () => {
    Parallax.bind();
});

3. 确认脚本加载配置（原PHP代码无需修改）

原wp_enqueue_script的最后参数设为true，表示脚本在footer加载，这已经符合最佳实践，能确保DOM元素加载完成后再执行JS代码。

关键修复点总结 #

• 修复HTML标签的语法错误，确保目标元素能被正确查询到。
• 将Parallax类的bind方法改为静态方法，允许直接通过Parallax.bind()调用。
• 添加DOMContentLoaded事件监听，确保在DOM完全加载后再初始化Parallax实例。
• 补全onScroll方法中的视差逻辑（原代码仅定义了变量，未实现实际位移）。

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