如何根据选中容器的data-episode-count值隐藏show-more按钮？

嗨，我来帮你搞定这个问题！你要实现的是：当当前选中的剧集季容器（显示状态是display:block）里的剧集数小于6时，隐藏对应的show-more按钮，对吧？我给你整理了几个实用的方案，适配不同的场景：

1. 通用核心逻辑 #

不管你的切换逻辑是怎样的，核心要做的就是这两步：

• 找到当前正在显示的剧集季容器（带data-episode-count属性的那个）
• 读取这个容器的剧集数量，判断是否小于6，然后切换show-more按钮的显示状态

2. 具体代码实现 #

方案一：适配直接用display:block标记活跃容器的情况 #

先写一个通用的检查函数，这样页面加载时和用户切换剧集季时都能调用：

function toggleShowMoreButton() {
  // 找到当前显示的剧集容器，这里假设容器类是series-season，你可以根据实际情况修改
  const activeSeason = document.querySelector('.series-season[style="display:block"]');
  if (!activeSeason) return; // 如果没找到活跃容器，直接退出

  // 读取data-episode-count的值，转成数字（一定要加10确保十进制转换）
  const episodeCount = parseInt(activeSeason.dataset.episodeCount, 10);
  
  // 找到show-more按钮，这里假设是全局一个按钮，要是每个季有自己的按钮，后面会说怎么改
  const showMoreBtn = document.querySelector('.show-more');
  
  // 判断数量，设置显示状态
  if (episodeCount < 6) {
    showMoreBtn.style.display = 'none';
  } else {
    showMoreBtn.style.display = 'block'; // 换成你原本按钮的显示样式，比如inline-block
  }
}

// 页面加载完成后先执行一次，初始化状态
document.addEventListener('DOMContentLoaded', toggleShowMoreButton);

// 监听剧集季切换的点击事件，假设切换按钮的类是season-toggle
document.querySelectorAll('.season-toggle').forEach(btn => {
  btn.addEventListener('click', () => {
    // 加个小延迟，确保容器的display状态已经更新完成
    setTimeout(toggleShowMoreButton, 100);
  });
});

方案二：更推荐！用类标记活跃容器的情况 #

如果你的活跃容器是通过添加active类来标记（而不是直接写style），那代码会更可靠，因为style属性可能会被其他脚本覆盖：

function toggleShowMoreButton() {
  const activeSeason = document.querySelector('.series-season.active');
  if (!activeSeason) return;

  const episodeCount = parseInt(activeSeason.dataset.episodeCount, 10);
  const showMoreBtn = document.querySelector('.show-more');

  // 用三元运算符简化判断
  showMoreBtn.style.display = episodeCount < 6 ? 'none' : 'block';
}

// 初始化+监听切换
document.addEventListener('DOMContentLoaded', toggleShowMoreButton);
document.querySelectorAll('.season-toggle').forEach(btn => {
  btn.addEventListener('click', toggleShowMoreButton);
});

方案三：每个剧集季都有独立的show-more按钮 #

如果每个季容器下面都有自己的show-more按钮，那可以调整代码，让每个容器对应自己的按钮：

function toggleAllShowMoreButtons() {
  // 遍历所有剧集季容器
  document.querySelectorAll('.series-season').forEach(season => {
    // 判断当前容器是否是活跃状态
    const isActive = season.style.display === 'block' || season.classList.contains('active');
    if (!isActive) return;

    const episodeCount = parseInt(season.dataset.episodeCount, 10);
    // 找到当前容器下的show-more按钮
    const showMoreBtn = season.querySelector('.show-more');
    if (showMoreBtn) {
      showMoreBtn.style.display = episodeCount < 6 ? 'none' : 'block';
    }
  });
}

// 调用方式和之前一样
document.addEventListener('DOMContentLoaded', toggleAllShowMoreButtons);
document.querySelectorAll('.season-toggle').forEach(btn => {
  btn.addEventListener('click', toggleAllShowMoreButtons);
});

3. 几个关键细节提醒 #

• dataset.episodeCount：这是读取HTMLdata-*属性的标准方式，data-episode-count对应dataset.episodeCount（驼峰命名规则）
• parseInt(..., 10)：一定要加上第二个参数10，避免把以0开头的数字当成八进制处理，导致转换错误
• 切换事件监听：如果你的剧集季切换不是通过按钮点击，而是下拉选择或者其他方式，记得把监听事件改成对应的触发方式哦

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