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>

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

E.g。 foo.com/lessons?lesson1 只能显示＆＃34;第1课＆＃34;

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

您可以通过在包含课程详细信息的id元素上放置div属性来解决此问题。在那里，您可以使用this question中引用的getParameterByName()函数来读取网址中的值，然后显示所需的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

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可用时，.lesson:taget变为活动状态。
有关详细信息，请参阅https://developer.mozilla.org/nl/docs/Web/CSS/:target

URL Query用于选择内容的字符串

2 个答案: