Fancybox修改data-fancybox为quick-view仍显示gallery的问题排查

我来帮你捋捋这个问题哈，这种情况我之前在项目里也碰到过，大概率是这几个原因导致的：

• 初始化代码重复或顺序错误：
  有可能页面里还残留着原来针对gallery的Fancybox初始化代码，或者新的初始化代码执行顺序在旧代码之后，被旧的初始化覆盖了。你可以检查下页面里的JS文件，看看是不是有两处调用了$(".hotel_gallery").fancybox()的代码，其中一处还是设置的gallery。

• 浏览器缓存搞的鬼：
  有时候浏览器会缓存旧的JS文件，哪怕你改了代码，实际运行的还是之前的版本。你可以试试用Ctrl+F5强制刷新页面，或者直接清除浏览器的缓存后再测试，看看是不是缓存导致新代码没生效。

• DOM元素绑定未更新：
  Fancybox在页面加载时就已经把事件绑定到.hotel_gallery元素上了，哪怕你后来修改了data-fancybox属性，旧的绑定实例还在，新的属性不会自动生效。这时候你需要先销毁旧的Fancybox实例，再重新绑定：

  // 先移除旧的绑定并销毁实例
  $(".hotel_gallery").off("click.fb");
  $.fancybox.destroy(true);
  
  // 修改属性并重新初始化
  $(".hotel_gallery").attr("data-fancybox", "quick-view")
  .fancybox({
    prevEffect: "none",
    nextEffect: "none",
    closeBtn: true,
    arrows: true,
    beforeShow() {
      this.title = this.src;
    },
    helpers: {
      title : { type : "inside" }
    }
  });
  

• 选择器冲突：
  看看项目里有没有其他地方也用了.hotel_gallery这个类名来初始化Fancybox，并且设置的是gallery。如果有，那新的初始化会被旧的覆盖，导致效果还是原来的。

另外，你可以打开浏览器的开发者工具（F12），切换到Console标签，看看有没有JS报错，有时候其他代码的错误会打断新的Fancybox初始化流程。

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