通过URL参数触发Isotope筛选功能失败求助

问题排查与修复步骤 #

• 确保$grid变量已完成Isotope初始化
  代码中直接调用$grid.isotope()，但如果未提前定义并初始化$grid，会直接报错。必须先将$grid指向目标容器并完成Isotope初始化：

  // 提前初始化Isotope容器
  var $grid = $('.grid').isotope({
    itemSelector: '.grid-item', // 根据你的实际DOM结构调整
    // 其他Isotope配置项
  });
  

• 替换过时的$(window).load事件
  $(window).load会等待所有资源加载完成才执行，建议改用$(document).ready（或简写$(function(){})），确保DOM加载完成后立即执行逻辑，避免元素查找失败：

  $(function() {
    // 你的筛选逻辑写在这里
  });
  

• 增加异常情况处理
  当URL无Hash值、或对应按钮不存在时，直接终止逻辑，避免无效操作：

  var hash = window.location.hash.substr(1);
  if (!hash) return; // 无Hash则退出
  
  var $targetBtn = $('button#' + hash);
  if (!$targetBtn.length) return; // 找不到对应按钮则退出
  

• 修正筛选值的获取逻辑
  直接从目标按钮元素获取data-filter值，避免类选择器可能带来的冲突：

  $targetBtn.addClass('is-checked');
  var filterValue = $targetBtn.data('filter');
  

完整修正代码 #

// 先完成Isotope容器初始化
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  // 你的其他配置项
});

$(function() {
  var hash = window.location.hash.substr(1);
  
  // 无Hash或对应按钮不存在时直接退出
  if (!hash || !$('button#' + hash).length) return;

  var $targetBtn = $('button#' + hash);
  $targetBtn.addClass('is-checked');
  var filterValue = $targetBtn.data('filter');
  
  // 触发Isotope筛选
  $grid.isotope({ filter: filterValue });
});

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