ブラウザに戻るボタンを押すとremoveClassが必要です

Question

私はhasher.jsを私のサイトに持っていますが、私はそれを完全には理解していませんが、私のjavascriptファイルで使用されています。

function activateKeyNav() 
    { 
     // Description: register keypress event on document object 
     jQuery(document).on('keydown', function(event) { 
      switch(event.which) 
      { 
       case 27: // escape 
        hasher.setHash(); 
        $('body').removeClass('projectLoaded'); 
        $('#arrow-nav').removeClass('slideIn'); 
        $('#backtoprojects').addClass('is-hidden'); 
        $('#project-close').addClass('is-hidden'); 
        break; 
      } 
     }); 
    } 
function goToNextProject() 
    { 
     if(projects[currentProject].rght) 
      updateHash(projects[currentProject].rght); 
    } 

    function goToPrevProject() 
    { 
     if(projects[currentProject].lft) 
      updateHash(projects[currentProject].lft); 
    } 
function updateHash(project) 
    { 
     hasher.setHash(project); 
    } 
$('#backtoprojects a').on('click', function(){ 
     hasher.setHash(); 
     $('#backtoprojects').addClass('is-hidden'); 
     deactivateKeyNav(); 
    }); 
$('#project-close').on('click', function(){ 
     hasher.setHash(); 
     $('#project-close').addClass('is-hidden'); 
    }); 
$('[data-type="projectLoader"]').click(function() { 

     var proj = $(this)[0].getAttribute('data-project'); 
     // loadProject(proj) 
     $('#arrow-nav').addClass('slideIn'); 

     updateHash(proj); 
     return false; 
     // return loadProject(proj); 

    }); 

crossroads.addRoute('/{project}', function(project) { 
     console.log(project); 
     loadProject(project); 
     currentProject = project; 
     deactivateKeyNav(); 
     activateKeyNav(); 

    }); 

    crossroads.addRoute('/', function() { 
     $('#backtoprojects').click(); 
    }); 
    crossroads.routed.add(console.log, console); 

    function parseHash(newHash, oldHash) { 
    crossroads.parse(newHash); 
    }; 

    hasher.initialized.add(parseHash); //parse initial hash 
    hasher.changed.add(parseHash); //parse hash changes 
    hasher.init(); //start listening for history change 

ブラウザとバックスペースと関係があるので、私はHTMLは必要ないと思います。

私はプロジェクトにいるときに、URLに/＃/ project-nameを追加します。バックスペースを押すか、ブラウザで「戻る」を押すと「プロジェクト名」は消えますが、まだプロジェクトに残っています。ホームページを読み込む必要があります。

document readyは可能ですか？またはremoveClass？私ができる場合は$('body').removeClass('projectLoaded');これはプロジェクトを殺し、あなたをホームページに戻します。

ここにはライブexampleがあります。

更新番号1 これは、バックスペースキーで機能しました。どのように組み合わせて、ケース27とケース8にコードを捨てなくても同じことをすることができますか？ code 27 && code 8？私はまだブラウザの戻るボタンの解決策が必要です。

case 8: // backspace 
    $('body').removeClass('projectLoaded'); 
    $('#arrow-nav').removeClass('slideIn'); 
    $('#backtoprojects').addClass('is-hidden'); 
    $('#project-close').addClass('is-hidden'); 
    break; 

UPDATE＃2

window.history.back(); 
window.history.go(-1); 

これらは私が今実現し、動作しませんでした。私は歴史の深い4つのプロジェクトになることができます。私はこれをどのようにターゲットにするのか分かりません。

Answer 1

jsでうんざりしています。これはうまく機能しています。バックスペースボタンを対象にする必要はありません。

crossroads.addRoute('/', function() { 
     $('#backtoprojects').click(); 
     $('body').removeClass('projectLoaded'); 
     $('#arrow-nav').removeClass('slideIn'); 
     $('#backtoprojects').addClass('is-hidden'); 
     $('#project-close').addClass('is-hidden'); 
    });