WordPress+Elementor环境下jQuery样式修改失效问题求助

我需要实现2D图纸指针与零件图片的联动高亮：鼠标悬停零件图片时，图纸上对应位置的指针高亮；悬停图纸指针时，对应零件图片也高亮。但编写的jQuery代码在WordPress搭配Elementor的环境里完全不生效，无法修改元素CSS样式。

原代码问题分析 #

原JS代码存在两处关键问题：

1. 多了一个多余的闭合});，导致语法错误
2. 混用了$和jQuery，WordPress默认启用jQuery的noConflict模式，$未被定义

另外，Elementor的代码加载时机、缓存机制也可能导致代码不执行。

修正后的完整代码 #

JavaScript（修复语法与兼容性） #

jQuery(document).ready(function($) {
    // 如果show_scroll_ele是自定义函数，请确保它在这段代码之前已定义
    // show_scroll_ele();

    // 零件悬停联动图纸指针
    $(".product li").mouseenter(function () {
        const idx = $(this).index();
        $(".product li, .pointer span").removeClass("selected");
        $(this).addClass("selected");
        $(".pointer span").eq(idx).addClass("selected");
    });

    // 图纸指针悬停联动零件
    $(".pointer span").mouseenter(function () {
        const idx = $(this).index();
        $(".product li, .pointer span").removeClass("selected");
        $(this).addClass("selected");
        $(".product li").eq(idx).addClass("selected");
    });
});

HTML结构 #

<div class="product_wrap">
    <div class="product">
        <ul>
            <li class="selected">
                <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro01.png" alt="枢轴" /></div>
                <p>Pintle</p>
            </li>
            <li>
                <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro02.png" alt="连杆" /></div>
                <p>Connecting Rod</p>
            </li>
            <li>
                <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro03.png" alt="轴" /></div>
                <p>Shaft</p>
            </li>
            <li>
                <div class="img"><img src="/wp-content/uploads/2022/08/ship_pro04.png" alt="螺旋桨轴" /></div>
                <p>Propeller Shaft</p>
            </li>
        </ul>
    </div>
    <div class="pointer ship">
        <span class="point01 selected">Pintle</span>
        <span class="point02">Connecting Rod</span>
        <span class="point03">Shaft</span>
        <span class="point04">Propeller Shaft</span>
        <img src="/wp-content/uploads/2022/08/ship_pointer.png" alt="图纸图片" />
    </div>
    <div class="clb"></div>
</div>

CSS样式 #

.product_wrap { margin-top: 60px; }
.product_wrap .product { float: left; width: 600px; }
.product_wrap .product ul { text-align: center; }
.product_wrap .product ul li { float: left; margin: 0 24px 4px 0; cursor: pointer; }
.product_wrap .product ul li .img { border: 1px solid #ddd; }
.product_wrap .product ul li p { font-size: 13.4px; font-weight: 300; color: #333; padding: 7px 0; letter-spacing: 0.4px; }
.product_wrap .product ul li.selected .img { border: 1px solid #0A96E8; }
.product_wrap .product ul li.selected p { color: #0A96E8; }
.product_wrap .pointer { float: right; position: relative; width: 570px; }
.product_wrap .pointer span { display: block; position: absolute; font-size: 12.2px; font-weight: 400; color: #222; line-height: 26px; padding: 0 10px; border: 1px solid #aaa; background-color: #fff; letter-spacing: 0.4px; cursor: pointer; }
.product_wrap .pointer span.selected { border: 1px solid #0A96E8; background-color: #0A96E8; color: #fff; }

.product_wrap .ship span.point01 { top: 167px; left: 40px; }
.product_wrap .ship span.point02 { top: 320px; left: 420px; }
.product_wrap .ship span.point03 { top: 203px; left: 248px; }
.product_wrap .ship span.point04 { top: 283px; left: 210px; }

Elementor环境下的额外注意事项 #

• 代码加载位置：不要直接在Elementor的HTML模块中插入JS，建议通过「Elementor > 自定义代码」添加，选择在页脚加载，确保DOM完全渲染后执行代码。
• 清除缓存：修改代码后，需清除Elementor缓存、WordPress缓存插件（如WP Rocket）缓存以及浏览器缓存，避免加载旧代码。
• 选择器权重：Elementor默认样式优先级较高，若样式不生效，可给CSS选择器增加权重，例如将.product_wrap .product ul li.selected .img改为body .product_wrap .product ul li.selected .img。
• 控制台排查：按F12打开浏览器开发者工具，查看控制台是否有语法错误或未定义函数（比如show_scroll_ele如果未提前定义会导致代码中断）。

内容的提问来源于stack exchange，提问作者Michael O'dlee