Elementor自定义文章网格：文字转图片代码仅生效首个帖子求助

问题根源 #

你原代码里用document.querySelector("#licon")只会选中页面中第一个带id="licon"的元素，所以仅第一篇文章生效。另外，页面多个元素共用同一个id不符合HTML规范，需改用class标记目标元素。

修复步骤 #

1. 调整HTML标记：在Elementor编辑器中，把所有需要替换内容的元素的id="licon"改为class="licon"。
2. 更新JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
    // 选中所有带licon类的元素
    var targetElements = document.querySelectorAll(".licon");
    
    // 遍历每个元素执行替换操作
    targetElements.forEach(function(el) {
        let content = el.innerHTML;
        content = content.replace(/Earth Check/g, '<img src="./licon/ec.png" alt="Earth Check">');
        content = content.replace(/Green Globe/g, '<img src="./licon/gg.png" alt="Green Globe">');
        content = content.replace(/Green Key/g, '<img src="./licon/gk.png" alt="Green Key">');
        content = content.replace(/Green Star/g, '<img src="./licon/gs.png" alt="Green Star">');
        content = content.replace(/Travelife/g, '<img src="./licon/tr.png" alt="Travelife">');
        el.innerHTML = content;
    });
});

代码说明 #

• document.querySelectorAll(".licon")：一次性选中所有需要处理的元素，而非仅第一个。
• 遍历操作确保每个网格项里的目标文字都被替换。
• 新增图片alt属性，满足网页可访问性要求，也能在图片加载失败时显示提示文本。

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