Elementor Pro Loop Grid中JavaScript仅对首个元素生效的问题

问题场景 #

在Elementor中创建循环项模板，使用Button组件（仅作形状展示，无点击功能）调用文章ACF自定义字段的0-100整数值，通过JavaScript脚本根据数值修改按钮渐变颜色。但将模板应用到Loop Grid组件时，仅列表中首个文章的按钮变色，其余按钮保持默认样式，即使将脚本移至Loop Grid所在页面也无法解决。

示例场景：3篇文章postA（值12）、postB（值99）、postC（值72），预期每个文章对应的圆形按钮根据数值显示对应渐变颜色，但仅postA的按钮生效。

问题根源 #

原脚本使用document.getElementById('myButton')获取按钮，但ID在DOM中必须唯一，循环生成的后续按钮会重复使用该ID（或丢失ID），导致getElementById仅返回第一个匹配的元素，因此只有首个按钮被处理。

修复步骤 #

1. 给循环按钮添加统一类名 #

在Elementor的Button组件设置中，为按钮添加自定义类名（例如acf-color-button），不要使用ID，因为循环会生成多个相同元素，ID重复不符合DOM规范。

2. 修改JavaScript脚本 #

更新脚本以遍历所有目标按钮，逐个处理颜色逻辑，同时优化颜色匹配逻辑（无需手动定义100个键值对）：

// 优化后的颜色匹配函数，根据数值区间返回对应颜色
function getColor(value) {
    if (value < 40) return '#F50000';
    if (value < 50) return `#${(0xF5 - (value - 40)).toString(16)}0000`;
    if (value < 70) {
        const greenHex = (0x0 + (value - 50) * 0xA).toString(16).padStart(2, '0');
        return `#C8${greenHex}00`;
    }
    if (value < 90) {
        const redHex = (0xC8 - (value - 70) * 0xA).toString(16).padStart(2, '0');
        return `#${redHex}C800`;
    }
    if (value < 100) return `#00${(0xC8 + (value - 90) * 0x5).toString(16)}00`;
    return '#00FA00';
}

// 遍历所有目标按钮并更新颜色
function updateAllCircles() {
    const buttons = document.querySelectorAll('.acf-color-button');
    const primaryColor = '#605BE5';
    
    buttons.forEach(button => {
        const textElement = button.querySelector('.elementor-button-text');
        if (!textElement) return;
        
        const value = parseInt(textElement.innerText.trim(), 10);
        if (isNaN(value)) return;
        
        const secondaryColor = getColor(value);
        button.style.backgroundImage = `linear-gradient(to bottom, ${primaryColor}, ${secondaryColor} 80%)`;
    });
}

// 页面加载完成后执行一次即可（若数值动态变化，再考虑用setInterval）
document.addEventListener('DOMContentLoaded', updateAllCircles);
// 适配Elementor动态加载内容的场景（可选）
document.addEventListener('elementor/frontend/init', () => {
    elementorFrontend.hooks.addAction('frontend/element_ready/loop-grid.default', updateAllCircles);
});

3. 对应HTML结构示例 #

修改后按钮的HTML结构（类名已添加到按钮标签）：

<div class="elementor-element elementor-element-29412fc elementor-align-left elementor-widget elementor-widget-button" data-id="29412fc" data-element_type="widget" data-settings="{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}" data-widget_type="button.default">
    <div class="elementor-widget-container">
        <div class="elementor-button-wrapper">
            <a class="elementor-button elementor-size-md acf-color-button" role="button">
                <span class="elementor-button-content-wrapper">
                    <span class="elementor-button-text">12</span>
                </span>
            </a>
        </div>
    </div>
</div>

说明 #

• 优化后的getColor函数通过数值区间计算颜色，避免了手动定义100个键值对，维护更方便，颜色过渡逻辑与原代码一致。
• 使用querySelectorAll获取所有带目标类名的按钮，确保每个按钮都被处理。
• 添加DOMContentLoaded事件确保页面加载完成后执行脚本，同时添加Elementor的动态加载监听，适配Elementor的AJAX加载场景。

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