代码之家 › 专栏 › 技术社区 › Dan382

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

query-string jquery

Dan382 · 技术社区 · 7 年前

我有许多页面上的课程列表如下:

<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 选择器每次创建大量重复代码。

有没有一种方法可以使用数组来压缩这个过程?

感谢您的反馈。

2 回复 | 直到 7 年前

Community Rupert Rawnsley 6 年前

您可以通过放置 id 归因于 div 包含课程详细信息的元素。从那里,您可以使用 getParameterByName() 中引用的函数 this question 从URL中读取值,然后显示所需的 迪夫 .试试这个:

<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

Ugluk 7 年前

可能不是严格意义上的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

推荐文章

CraZyDroiD · 获取javascript中查询字符串的值

6 年前

maral · 如何使用query_字符串的fields属性,并在逻辑上使用elasticsearch?

6 年前

Raju Paladiya · 在Internet Explorer(IE)中,URL查询字符串具有特殊字符

6 年前

Sam · 基于可变参数值删除查询字符串的部分[重复]

6 年前

Integralist · 将CloudFront配置为代理查询字符串作为S3对象键的一部分?

6 年前

scopeak · 如何在不重新加载的情况下修改URL查询字符串

6 年前

Pennf0lio · URL中的唯一查询字符串是否可以阻止网站缓存在浏览器中?

6 年前

Punit Gajjar · 可以在ElasticSearch查询字符串中使用GroupBy吗?

6 年前

Stephen R · 在经典ASP

6 年前

Dan382 · 用于选择内容的URL查询字符串

7 年前