如何利用alt属性为Elementor Pro画廊图片设置自定义商品跳转链接

解决代码 #

直接替换你当前使用的全部代码即可：

<style>.e-gallery-item{cursor: pointer;} </style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // 请替换为你站点的商品链接前缀
  const baseProductUrl = 'https://www.你的域名.com/product/';
  const allGalleryItems = document.querySelectorAll('.e-gallery-item');

  allGalleryItems.forEach(function (galleryItem) {
    // 获取当前画廊项内的图片元素
    const targetImage = galleryItem.querySelector('.e-gallery-image');
    // 容错判断：没有找到图片/没有设置alt就不绑定跳转
    if (!targetImage || !targetImage.getAttribute('alt')) return;
    // 提取alt值作为商品slug
    const productSlug = targetImage.getAttribute('alt').trim();
    // 拼接最终跳转链接
    const jumpUrl = baseProductUrl + productSlug + '/';
    // 绑定点击事件
    galleryItem.addEventListener('click', function () {
      window.location.href = jumpUrl;
    });
  });
});
</script>

核心修改说明 #

• 完全移除了需要手动维护的链接数组，不需要再跟着图片顺序调整链接排序
• 修正了你之前的语法错误：原生JS获取DOM属性的方法是getAttribute（没有末尾的s）
• 调整了属性获取逻辑：alt属性是挂载在画廊容器内部的图片元素上，需要先选中对应的图片节点再提取属性值
• 加入了基础的容错判断，避免部分图片未设置alt时出现跳转异常

使用注意事项 #

• 替换代码中https://www.你的域名.com/product/为你自己站点的商品页统一前缀
• 确保每张图片设置的alt值和对应商品页的slug完全一致，不要包含多余空格、中文或特殊符号
• 后续新增/删除/调整图片顺序时，只要对应修改图片的alt属性值即可自动匹配跳转链接，不需要改动代码

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