用于选择内容的 URL 查询字符串答案

【问题标题】：URL Query String to select content用于选择内容的 URL 查询字符串
【发布时间】：2017-01-06 11:55:31
【问题描述】：

我有很多页面列出了这样的课程：

<div class="et_pb_module">Page Title</div>
<div class="insert-after"></div>
<div class="lesson-container">
   <div class="et_pb_module">
      <div class="content">
        Lesson 1
      </div>
   </div>
   <div class="et_pb_module">
      <div class="content">
        Lesson 2
      </div>
   </div>
   <div class="et_pb_module">
      <div class="content">
        Lesson 3
      </div>
   </div>
   <div class="et_pb_module">
      <div class="content">
        Lesson 4
      </div>
   </div>
</div>

如果 URL 的查询字符串中调用了特定课程，我希望只在页面上显示该课程：

例如foo.com/lessons?lesson1 应该只显示“第 1 课”

我在 jQuery 中有一个 IF 语句可以做到这一点：

if (window.location.href.indexOf("?lesson1") > -1) {
        $('.et_pb_module').hide();/*Hide all lessons*/
        $('.lesson-container .et_pb_module:nth-of-type(2) .content ').insertAfter('.insert-after'); /*Select content from first lesson and place it at top of the page after 'insert-after'*/
 }

这很好用，但是每次创建大量重复代码时，我都必须将上面的内容删减九次，更新查询字符串和:nth-of-type 选择器。

有没有办法可以使用数组来压缩这个过程？

感谢您的任何反馈。

【问题讨论】：

那么你为什么不只使用一个查询字符串并有一个值来表示具有匹配它的类或 id 的部分并显示它呢？ ?lesson=lesson1 比阅读课程获得价值，而不是选择那个。

标签： jquery query-string

【解决方案1】：

您可以通过在包含课程详细信息的div 元素上放置id 属性来解决此问题。从那里您可以使用this question 中引用的getParameterByName() 函数从URL 中读取值，然后显示所需的div。试试这个：

<div class="et_pb_module">Page Title</div>
<div class="insert-after"></div>
<div class="lesson-container">
  <div class="et_pb_module" id="lesson1">
    <div class="content">Lesson 1</div>
  </div>
  <div class="et_pb_module" id="lesson2">
    <div class="content">Lesson 2</div>
  </div>
  <div class="et_pb_module" id="lesson3">
    <div class="content">Lesson 3</div>
  </div>
  <div class="et_pb_module" id="lesson4">
    <div class="content">Lesson 4</div>
  </div>
</div>

var lesson = getParameterByName('lesson');
if (lesson) {
    $('.lesson-container .et_pb_module').hide();
    $('#' + encodeURIComponent(lesson)).show();
}

请注意，要使其正常工作，URL 需要采用以下格式：

foo.com/lessons?lesson=lesson1

【讨论】：

这很好用，但我只想要选定的课程内容 div 而不是包含的 et_pb_module，它是一个手风琴选项卡，默认情况下关闭。有没有办法像以前一样选择课程内容div并附加到顶部？
其实我自己已经解决了这个问题。谢谢。最后一个问题。手动添加课程 ID 需要时间（这在很多页面上）。有没有办法自动添加这些？

【解决方案2】：

也许严格来说不是一个 jQuery 答案，但同样可以使用 CSS：

.lesson {
  display: none;
}
.lesson:target {
  display: block;
}

<a href="#1">1</a>
<a href="#2">2</a>
<div id="1" class="lesson">
  DIV 1
</div>
<div id="2" class="lesson">
  DIV 2
</div>

.lesson:taget 当具有当前目标（即锚链接）的 id 的 div 可用时变为活动状态。
有关更多信息，请参阅https://developer.mozilla.org/nl/docs/Web/CSS/:target

【讨论】：