使用JQuery根据用户SELECT输入显示多ID内容

Question

我正在为我的图书系列构建一个角色维基并试图隐藏剧透。读者会看到一个下拉框，询问他们读完的最后一本书是哪本书。当他们选择此选项时，应该会出现带有剧透的 div。

我有一个非常基本的功能，可以根据输入隐藏或显示 div（这里是 Js Fiddle），而且它工作得很好。

问题是读过第 6 本书的人也应该能够看到第 1-5 本书的 div，但我不知道如何实现这一点。

有什么建议吗？我也不完全相信这是隐藏/显示分散在整个页面中的内容的最佳方式，所以如果有人有更好的想法，请考虑我！

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

<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>

Answer 1

这是一个工作代码，显示了直到选择的最后一本书为止的剧透

我们可以使用 prevAll 但这更安全，具体取决于您的需求

$(function() {
  const $spoiler = $('.spoiler').hide();
  const spoilers = $('#spoilerSelect option').map(function() {
    return +this.value.split('-').pop()
  }).get() // get the list
  $('#book-1').show();
  $('#spoilerSelect').on("change", function() {
    $spoiler.hide();
    const idx = this.selectedIndex;
    const last = spoilers[idx]; // get last book 
    $spoiler.each(function() {
      const divIdx = +this.id.split("-").pop(); // get the int of the div
      $(this).toggle(divIdx <= last)
    })
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/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" class="spoiler">
  Book Three
</div>
<div id="book-3.5" class="spoiler">
  Book Three.Five
</div>
<div id="book-4" class="spoiler">
  Book Four
</div>
<div id="book-4.5" class="spoiler">
  Book Four.Five
</div>

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


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