如何通过JavaScript/jQuery自动为页面所有链接添加data-fancybox="gallery"属性

嘿，手动逐个加属性真的太折磨人了！给你准备了两种实用方案，不管你用原生JavaScript还是jQuery，都能一键搞定批量添加data-fancybox="gallery"属性的需求：

这应该是最简洁的写法，如果你项目里已经在用jQuery，直接用下面的代码就行：

// 确保DOM加载完成后执行
$(document).ready(function() {
  // 精准匹配所有指向图片的链接（推荐）
  $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]').attr('data-fancybox', 'gallery');
  
  // 如果想给页面里所有<a>标签都加（不管链接是不是图片），就换成这句：
  // $('a').attr('data-fancybox', 'gallery');
});

解释一下：[href$=".jpg"]是CSS属性选择器，用来匹配href属性以.jpg结尾的链接，这样就能精准给图片链接加属性，不会影响其他普通链接。

如果你的项目没用到jQuery，用原生JS也一样能实现，代码稍微长一点但完全够用：

// 等DOM全部加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有图片链接
  const imageLinks = document.querySelectorAll('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]');
  
  // 遍历每个链接，添加属性
  imageLinks.forEach(link => {
    // 两种设置属性的方式都可以
    link.setAttribute('data-fancybox', 'gallery');
    // 或者用dataset API：link.dataset.fancybox = 'gallery';
  });
});

小提示 #

如果你的页面里有动态加载的内容（比如滚动加载图片、AJAX异步加载的链接），上面的代码只会处理页面初始加载时的链接。这种情况下，你需要在动态内容加载完成后，再调用一次上面的添加属性代码，或者参考Fancybox官方文档里的动态内容初始化方法（一般是调用Fancybox.reload()之类的API）。

把代码放在页面底部</body>标签之前，或者用上面的DOM加载完成事件包裹，就能确保代码能找到所有链接元素啦！

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