基于用户SELECT选择，用jQuery实现多ID剧透内容批量显示的问题

我正在为自己的系列书籍搭建角色维基，需要隐藏剧透内容。页面设置下拉选择框，让读者选择已读完的最后一本书，选中后应显示对应及之前书籍的剧透div。目前已有基础的jQuery显隐函数，但当前仅能显示选中书籍的内容，无法实现读完第6本书的读者同时查看1-5本书的剧透，特此寻求解决方案，也欢迎针对页面分散内容显隐的优化建议。

现有代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<select id="spoilerSelect">
  <option value="book-1">Book One</option>
  <option value="book-2">Book Two</option>
  <option value="book-3">Book Three</option>
  <option value="book-3-5">Book Three.Five</option>
  <option value="book-4">Book 4</option>
  <option value="book-4-5">Book Four.Five</option>
  <option value="book-5">Book 5</option>
  <option value="book-6">Book 6</option>
</select>

<div id="book-1" class="spoiler">
  Book One
</div>

<div id="book-2" class="spoiler">
  Book Two
</div>

<div id="book-3-5" class="spoiler">
  Book Three.Five
</div>

<div id="book-5" class="spoiler">
  Book 5
</div>

JavaScript #

$(document).ready(function() {
  $('.spoiler').hide();
  $('#book-1').show();
  $('#spoilerSelect').change(function() {
    $('.spoiler').hide();
    $('#' + $(this).val()).show();
  })
});

核心思路是给每个书籍剧透元素添加层级标记，通过选中书籍的层级，显示所有层级小于等于它的剧透内容。

步骤1：修改HTML，添加层级属性 #

给每个<option>和对应的剧透<div>添加data-level属性，用数字标记书籍的阅读顺序层级（数字越大代表阅读顺序越靠后）：

<select id="spoilerSelect">
  <option value="book-1" data-level="1">Book One</option>
  <option value="book-2" data-level="2">Book Two</option>
  <option value="book-3" data-level="3">Book Three</option>
  <option value="book-3-5" data-level="3.5">Book Three.Five</option>
  <option value="book-4" data-level="4">Book 4</option>
  <option value="book-4-5" data-level="4.5">Book Four.Five</option>
  <option value="book-5" data-level="5">Book 5</option>
  <option value="book-6" data-level="6">Book 6</option>
</select>

<div id="book-1" class="spoiler" data-level="1">
  Book One
</div>

<div id="book-2" class="spoiler" data-level="2">
  Book Two
</div>

<div id="book-3-5" class="spoiler" data-level="3.5">
  Book Three.Five
</div>

<div id="book-5" class="spoiler" data-level="5">
  Book 5
</div>

步骤2：更新jQuery逻辑，批量显示符合条件的内容 #

修改JS代码，当选择框变化时，获取选中项的层级，遍历所有剧透元素并显示层级小于等于选中值的内容：

$(document).ready(function() {
  $('.spoiler').hide();
  // 初始显示第一本书的内容
  $('.spoiler[data-level="1"]').show();
  
  $('#spoilerSelect').change(function() {
    const selectedLevel = parseFloat($(this).find(':selected').data('level'));
    $('.spoiler').hide();
    
    $('.spoiler').each(function() {
      const itemLevel = parseFloat($(this).data('level'));
      if (itemLevel <= selectedLevel) {
        $(this).show();
      }
    });
  });
});

特殊情况处理 #

如果HTML中缺失部分书籍的剧透div（比如示例里的book-3、book-4），代码依然有效，只会显示存在的、符合层级条件的内容。

• 分散内容精准控制：如果剧透内容分散在页面不同位置（比如每个角色条目下的对应书籍剧透），可以给每个剧透块额外添加data-book属性（如data-book="book-1"），结合data-level使用，能更灵活地控制分散内容的显隐。
• 记住用户选择：用localStorage保存用户上次选择的书籍，下次打开页面自动加载对应层级的剧透，提升体验：

  $(document).ready(function() {
    $('.spoiler').hide();
    let savedSelection = localStorage.getItem('lastBook');
    let selectedLevel;
    
    if (savedSelection) {
      $('#spoilerSelect').val(savedSelection);
      selectedLevel = parseFloat($('#spoilerSelect').find(':selected').data('level'));
    } else {
      selectedLevel = 1;
      $('#spoilerSelect').val('book-1');
    }
    
    // 初始化显示对应内容
    $('.spoiler').each(function() {
      const itemLevel = parseFloat($(this).data('level'));
      if (itemLevel <= selectedLevel) {
        $(this).show();
      }
    });
    
    $('#spoilerSelect').change(function() {
      selectedLevel = parseFloat($(this).find(':selected').data('level'));
      $('.spoiler').hide();
      
      $('.spoiler').each(function() {
        const itemLevel = parseFloat($(this).data('level'));
        if (itemLevel <= selectedLevel) {
          $(this).show();
        }
      });
      // 保存选择到本地存储
      localStorage.setItem('lastBook', $(this).val());
    });
  });
  

• 升级jQuery版本：示例使用的jQuery 1.6.4过于老旧，建议升级到最新稳定版（如3.x），避免兼容性问题。

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