URL 查询字符串到 select 内容

Question

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

<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 应该只显示 "lesson 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 选择器。

有什么方法可以使用数组来压缩这个过程吗？

感谢任何反馈。

Answer 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();
}

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

foo.com/lessons?lesson=lesson1

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

当具有当前目标 ID 的 div（因此，锚点 link）可用时，.lesson:taget 变为活动状态。
有关这方面的更多信息，请参阅 https://developer.mozilla.org/nl/docs/Web/CSS/:target

URL 查询字符串到 select 内容

URL Query String to select content

jquery

query-string