创建下一个/上一个导航

发布于 2024-09-30 18:38:06 字数 1754 浏览 0 评论 0原文

我正在开发一个具有多个部分的网站,每个部分包含大约 5-10 个项目。我正在尝试创建一个下一个/上一个导航,使您可以滚动浏览每个部分中的项目。这是我的代码:

  var prev_li     = $('.projects ul li.selected').prev('li'),
  prev_href   = $(prev_li).children().attr('href'),
  next_li     = $('.projects ul li.selected').next('li'),
  next_href   = $(next_li).children().attr('href');

$('#previous-project').click(function(e){
        if ($(prev_li).length) {
          window.location = prev_href;
          return false;
        } else {
          window.location = last_href;
          return false;
        }
  });

然后是下一个项目的代码。我的问题是存在重复的项目(有些项目位于多个部分)。这意味着多个项目具有相同的 URL,因此某些项目在真正未被选中时将获得“selected”类。这意味着,当您位于多个部分中的项目并单击下一个或上一个按钮时,它将从该项目的第一个实例转到上一个项目(即使该项目位于另一个部分中)。我需要一些有效的方法来指定每个部分中的项目列表,因此它只在这些项目中轮换。

我的一个想法是向每个项目列表添加一个类,并执行如下操作:

  var traeng_prev_li     = $('.transportation-engineering.projects ul li.selected').prev('li'),
      traeng_prev_href   = $(traeng_prev_li).children().attr('href'),
      traeng_next_li     = $('.transportation-engineering.projects ul li.selected').next('li'),
      traeng_next_href   = $(traeng_next_li).children().attr('href');

// same variables for each section

  $('#previous-project').click(function(){
    if ($(traeng_prev_li).length) {
      window.location = traeng_prev_href;
      return false;
    } else if ($(struct_prev_li).length) {
      window.location = struct_prev_href;
      return false;
    } else if ($(civil_prev_li).length) {
      window.location = civil_prev_href;
      return false;
    } else if ($(archi_prev_li).length) {
      window.location = archi_prev_href;
      return false;
.... //all the way down through all the sections

这样做的问题是a)效率非常低b)我认为即使你不在该列表中,它仍然有一个长度那么问题仍然存在?

I am working on a site that has multiple sections, each with around 5-10 projects within them. I am trying to create a next/previous navigation that will allow you to scroll through the projects within each section. This is the code I had for this:

  var prev_li     = $('.projects ul li.selected').prev('li'),
  prev_href   = $(prev_li).children().attr('href'),
  next_li     = $('.projects ul li.selected').next('li'),
  next_href   = $(next_li).children().attr('href');

$('#previous-project').click(function(e){
        if ($(prev_li).length) {
          window.location = prev_href;
          return false;
        } else {
          window.location = last_href;
          return false;
        }
  });

And then the same from the next project. My problem is that there are duplicate projects (some projects are in multiple sections). This means that multiple projects have the same URL and so some projects will get the class of "selected" when they really are not selected. This means that when you are on a project that is in multiple section and click the next or previous button, it will go to the previous project from the first instance of the project (even if that is in another section). I need some efficient way to specify the list of projects within each section and so it only rotates through those projects.

One idea I had was to add a class to each list of projects and do something like this:

  var traeng_prev_li     = $('.transportation-engineering.projects ul li.selected').prev('li'),
      traeng_prev_href   = $(traeng_prev_li).children().attr('href'),
      traeng_next_li     = $('.transportation-engineering.projects ul li.selected').next('li'),
      traeng_next_href   = $(traeng_next_li).children().attr('href');

// same variables for each section

  $('#previous-project').click(function(){
    if ($(traeng_prev_li).length) {
      window.location = traeng_prev_href;
      return false;
    } else if ($(struct_prev_li).length) {
      window.location = struct_prev_href;
      return false;
    } else if ($(civil_prev_li).length) {
      window.location = civil_prev_href;
      return false;
    } else if ($(archi_prev_li).length) {
      window.location = archi_prev_href;
      return false;
.... //all the way down through all the sections

The problem with this is a) it is terribly inefficient and b) I think even if you are not on that list, it still has a length and so the problem still persists?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

谜泪 2024-10-07 18:38:06

在指定部分的网址末尾添加哈希值,

例如 /projects/poplar_street_roundabou#transportation-facilities

然后您可以在查找时使用 location.hash 来定位特定部分next/prev

var prev_li = $('.projects.' + window.location.hash.substring(1) + ' ul li.selected').prev('li')

逐步解释

当 url 具有 #transportation-facilities称为哈希)时,我们可以通过 javascript 访问它window.location.hash 属性。

但它也会返回 # 字符,因此我们需要使用 substring() 方法。

现在,在 jquery 中,我们需要定位具有 projects 类和 transportation-facilities 类的元素内的 ul。在 CSS 中,这是通过使用 多类选择器 例如,.class1.class2 将匹配同时分配了 class1class2 的元素。

所以这一行

$('.projects.' + window.location.hash.substring(1) + ' ul li.selected').prev('li')

翻译成

$('.projects.transportation-facilities ul li.selected').prev('li')

add hashes at the end of the urls that specify the section

like /projects/poplar_street_roundabou#transportation-facilities

then you can use the location.hash to target the specific section when finding next/prev

var prev_li = $('.projects.' + window.location.hash.substring(1) + ' ul li.selected').prev('li')

kind of step by step explanation

when the url has a #transportation-facilities (called hash) we can access it from javascript with the window.location.hash property.

but it will return the # char as well, so we need to remove it by using the substring() method.

Now in jquery we need to target the ul that is inside an element that has the projects class but also the transportation-facilities class. In CSS this is achieved by using the multiple class selector for example .class1.class2 will match elements that have both class1 and class2 assigned to them.

so this line

$('.projects.' + window.location.hash.substring(1) + ' ul li.selected').prev('li')

translates to

$('.projects.transportation-facilities ul li.selected').prev('li')
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文