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 を持つことを意味するため、一部のプロジェクトは、実際には選択されていない場合でも「選択済み」のクラスを取得します。これは、複数のセクションにあるプロジェクトで次または前のボタンをクリックすると、プロジェクトの最初のインスタンスから前のプロジェクトに移動することを意味します (それが別のセクションにある場合でも)。各セクション内のプロジェクトのリストを指定する効率的な方法が必要なので、それらのプロジェクトのみをローテーションします。

私が持っていた 1 つのアイデアは、プロジェクトの各リストにクラスを追加し、次のようにすることでした。

  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（ハッシュと呼ばれる）がある場合、プロパティを使用してjavascriptからURLにアクセスできますwindow.location.hash。

ただし、charも返されるため、メソッド#を使用して削除する必要があります。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 に答える