Isotope画廊默认加载问题：单函数控双画廊仅其一默认显示

嘿，我一眼就看到你代码里的问题啦——你在load配置对象里重复写了filter属性！在JavaScript里，对象里的重复属性键会被后面的完全覆盖，所以你的代码实际生效的只有最后一个filter: '.jab'，这就解释了为什么第二个画廊（对应.jab）需要点击标签才显示，而第一个画廊可能因为页面元素刚好匹配了最后的筛选器，或者有其他默认逻辑才正常工作。

接下来给你几个可行的解决方案，你可以根据实际情况选择：

方案1：根据页面元素自动判断默认筛选器（适用于两页面共用同一ID的画廊） #

如果两个页面的画廊都用#portfoliolist这个ID，我们可以先检测当前页面存在的元素类型，再动态设置默认筛选器：

$(function() {
  var filterList = {
    init: function() {
      // 检查页面是否有.shute类型的项目，有则用它当默认，否则用.jab
      var defaultFilter = $('.portfolio.shute').length ? '.shute' : '.jab';
      $('#portfoliolist').mixItUp({
        selectors: {
          target: '.portfolio',
          filter: '.filter'
        },
        load: {
          filter: defaultFilter
        }
      });
    }
  };
  filterList.init();
});

方案2：给画廊设置不同ID，分别初始化（更推荐，避免冲突） #

更规范的做法是给两个页面的画廊设置不同的ID，比如第一个用#portfoliolist-shute，第二个用#portfoliolist-jab，然后分别初始化，逻辑更清晰也不会有冲突：

$(function() {
  var filterList = {
    init: function() {
      // 初始化第一个页面的画廊（仅当页面存在该元素时执行）
      if ($('#portfoliolist-shute').length) {
        $('#portfoliolist-shute').mixItUp({
          selectors: {
            target: '.portfolio',
            filter: '.filter'
          },
          load: {
            filter: '.shute'
          }
        });
      }
      // 初始化第二个页面的画廊（仅当页面存在该元素时执行）
      if ($('#portfoliolist-jab').length) {
        $('#portfoliolist-jab').mixItUp({
          selectors: {
            target: '.portfolio',
            filter: '.filter'
          },
          load: {
            filter: '.jab'
          }
        });
      }
    }
  };
  filterList.init();
});

补充说明 #

如果你本来想让某个画廊同时显示.shute和.jab的元素，MixItUp的筛选器语法是用逗号分隔多个类名，应该写成filter: '.shute,.jab'，而不是重复写两个filter键——这是JavaScript对象的基本规则，同一个对象里不能有重复的属性名，后面的会直接覆盖前面的。

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