1

我正在一个有多个部分的网站上工作，每个部分都有大约 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，因此某些项目在真正未被选中时会获得“选中”类。这意味着当您在一个位于多个部分的项目上并单击下一个或上一个按钮时，它将从项目的第一个实例转到上一个项目（即使它在另一个部分中）。我需要一些有效的方法来指定每个部分中的项目列表，因此它只在这些项目中轮换。

我的一个想法是为每个项目列表添加一个类并执行以下操作：

  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）我认为即使您不在该列表中，它仍然有长度，所以问题仍然存在？

4

1 回答 1

0

在指定部分的 url 末尾添加哈希

像/projects/poplar_street_roundabou#transportation-facilities

然后您可以location.hash在查找下一个/上一个时使用 来定位特定部分

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

一步一步的解释

当 url 有一个#transportation-facilities（称为 hashwindow.location.hash ）时，我们可以使用属性从 javascript 访问它。

但它也会返回#字符，因此我们需要使用该substring()方法将其删除。

现在在 jquery 中，我们需要将目标定位在具有类但也具有类ul的元素内。在 CSS 中，这是通过使用例如将匹配同时具有并分配给它们的元素来实现的。projectstransportation-facilitiesmultiple class selector.class1.class2class1class2

所以这条线

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

翻译成

$('.projects.transportation-facilities ul li.selected').prev('li')
于 2010-11-04T14:19:34.597 回答