使用 JQuery 显示基于用户 SELECT 输入的多 ID 内容-解网

问：

我正在为我的系列丛书建立一个角色维基，并试图隐藏剧透。读者会看到一个下拉框，询问他们完成的最后一本书是哪本书。当他们选择此选项时，应该会出现带有扰流板的 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>

jquery 下拉菜单显示-隐藏

$(function() {
  const $spoiler = $('.spoiler').hide();
  const spoilers = $('#spoilerSelect option').map(function() {
    return +this.value.split('-').pop(); // get the int of the option value
  }).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>

这是一个 prevAll 版本 - 它需要 $.escapeSelector，因为句号和一个 addBack 来选择 prevAll 的基础

$(function() {
  const $spoiler = $('.spoiler').hide();
  $('#book-1').show();
  $('#spoilerSelect').on("change", function() {
    $spoiler.hide();
    $(`#${$.escapeSelector(this.value)}`)
      .prevAll() // previous siblings
      .addBack() // and itself
      .show()
  })
});

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

使用 JQuery 显示基于用户 SELECT 输入的多 ID 内容

Using JQuery to show multi-ID content based on user SELECT input

评论

评论