jqueryでHTTP通信をしないページ遷移 複数ページ版

前記事　
jqueryでHTTP通信をしないページ遷移

前回の記事で実装した機能で複数ページを遷移できるようにしました。



コードは以下の通りです
*コピペするときはコード中のコメントアウトは消してください

haml

.kabaokun
  .zyuuhati
    .keikoku-box
      %P.top-keikoku
        = fa_icon 'venus-mars'
        %span 警告！
      %p.keikoku-bunsyo 当サイトは18歳以下の利用を固く禁じます。あなたは18歳以上ですか?
      //yabababaクラスが共通の発火点です
      %a.yabababa.ryoukai はい
      %a.nigeru いいえ

  .waller.yabai
    .aaaaaaa 
      //aaaaaaaは空の要素です。wallerクラスまでのネストを2段にするためのものです。
      %P.yabababa まじ卍字

  .wall-of-manzi.yabai
    .aaaaaaa
      %P.yabababa おこ

  .wall-burn.yabai 
    .aaaaaa
      %p.yabababa 激おこ

  .wall-big-fire.yabai
    .aaaaaaa
      %P.yabababa 激おこプンプン丸

  .wall-burnout.yabai 
    .aaaaaa
      %p.yabababa 激おこカムチャッカファイヤー

  .nakayoshi.yabai
    .aaaaaa
      %p.yabababa 仲直りしよ

css

.yabai{
  display: none;
}
以下略

js

$(function(){
  $('.yabababa').on('click', function(e){
    e.preventDefault(); 
    $(this).parent().parent().addClass('yabai'); //発火点の2つ上の要素(現在の画面全体を持つクラス)にyabaiクラスを与える
    $(this).parent().parent().next().removeClass('yabai'); //発火点の2つ上(現在の画面全体を持つクラス)の次の要素からyabaiクラスを奪う
  });
});

　各ページの発火点のクラスをyabababaクラスに統一することでjqueryの記述を全ページで使い回せるようにしました。
　この時注意するのは、ページ全体を指す要素から発火点までの階層数を全ページで統一していないとうまく作動してくれない点です。上記のコードでは最初の画面と以降の画面の発火点までのネスト数を合わせるために、2枚目以降のページには何もCSSを当てていないaaaaaaというクラスの要素を作っています。