筛选器选择后Show More/Less按钮失效问题求助

问题根源在于筛选器变更时采用AJAX局部刷新侧边栏内容，导致原来绑定了点击事件的按钮和筛选选项元素被新的DOM节点替换，而你的初始化脚本仅在页面首次加载时执行一次，没有对新生成的元素重新绑定事件或执行初始化逻辑。

方案1：使用事件委托绑定点击事件 #

事件委托利用事件冒泡特性，把事件绑定到不会被替换的父容器上，不管子元素怎么更新，事件都能正常触发。

替换原有脚本为以下代码：

// 移除自定义hasClass方法，直接用原生classList.contains
// 封装筛选器折叠初始化的通用函数
function initFilterCollapse(filterClass) {
  const parent = document.querySelector(`.${filterClass}`);
  if (!parent) return;
  
  const children = parent.children;
  // 默认隐藏第6个之后的选项
  for (let i = 6; i < children.length - 1; i++) {
    children[i].classList.add('hide');
  }
}

// 页面首次加载时初始化所有筛选器
document.addEventListener('DOMContentLoaded', function() {
  initFilterCollapse('Size');
  initFilterCollapse('Marca');
});

// 用事件委托绑定按钮点击事件
document.addEventListener('click', function(e) {
  const target = e.target;
  if (!target.classList.contains('show-more-filters')) return;

  // 找到按钮所属的筛选器组标识
  const buttonContainer = target.closest('[class^="show-more-button-"], [class^="show-less-button-"]');
  if (!buttonContainer) return;
  const buttonIndex = buttonContainer.className.match(/\d+/)[0];
  
  // 映射筛选器类型（可根据实际结构调整）
  const filterMap = {
    '2': 'Size',
    '3': 'Marca'
  };
  const filterClass = filterMap[buttonIndex];
  if (!filterClass) return;

  const parent = document.querySelector(`.${filterClass}`);
  const children = parent.children;
  const moreButton = document.querySelector(`.show-more-button-${buttonIndex}`);

  if (target.textContent.trim() === 'Show More') {
    // 显示隐藏选项，隐藏Show More按钮
    for (let i = 6; i < children.length - 1; i++) {
      children[i].classList.remove('hide');
    }
    moreButton.classList.add('hide');
  } else if (target.textContent.trim() === 'Show Less') {
    // 隐藏选项，显示Show More按钮
    for (let i = 6; i < children.length - 1; i++) {
      children[i].classList.add('hide');
    }
    moreButton.classList.remove('hide');
  }
});

方案2：监听AJAX完成事件，重新执行初始化逻辑 #

如果你的筛选AJAX有对应的回调事件（比如Shopify集合筛选会触发collection:update），可以在事件触发时重新初始化筛选器：

// 封装初始化函数
function initFilterCollapse(filterClass, buttonIndex) {
  const parent = document.querySelector(`.${filterClass}`);
  if (!parent) return;
  
  const children = parent.children;
  // 重置隐藏状态
  for (let i = 6; i < children.length - 1; i++) {
    children[i].classList.add('hide');
  }

  // 重新绑定按钮事件（先克隆节点清除旧事件）
  const moreButton = document.querySelector(`.show-more-button-${buttonIndex}`);
  const lessButton = document.querySelector(`.show-less-button-${buttonIndex}`);
  
  moreButton.replaceWith(moreButton.cloneNode(true));
  lessButton.replaceWith(lessButton.cloneNode(true));
  
  const newMoreBtn = document.querySelector(`.show-more-button-${buttonIndex}`);
  const newLessBtn = document.querySelector(`.show-less-button-${buttonIndex}`);

  newMoreBtn.addEventListener('click', function() {
    for (let i = 6; i < children.length - 1; i++) {
      children[i].classList.remove('hide');
    }
    newMoreBtn.classList.add('hide');
  });

  newLessBtn.addEventListener('click', function() {
    for (let i = 6; i < children.length - 1; i++) {
      children[i].classList.add('hide');
    }
    newMoreBtn.classList.remove('hide');
  });
}

// 页面加载和AJAX更新时执行初始化
document.addEventListener('DOMContentLoaded', function() {
  initFilterCollapse('Size', 2);
  initFilterCollapse('Marca', 3);
});

// 监听筛选AJAX完成事件（不同平台事件名可能不同）
document.addEventListener('collection:update', function() {
  initFilterCollapse('Size', 2);
  initFilterCollapse('Marca', 3);
});

额外优化建议 #

• 不要扩展HTMLElement.prototype，原生element.classList.contains()完全可以替代自定义hasClass方法，避免污染全局原型。
• 按钮的id属性不要重复（你的代码中btnfilter-{{ forloop.index }}同时用在两个按钮上），ID必须唯一，建议改用类名操作。
• 避免硬编码索引（比如parent_size[1]），改用更可靠的选择器定位元素，降低代码耦合度。

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