title: Dynamic switch statement for keypress (Javascript)
body: <p>I've got a website that has full width and height <code>div</code>'s (each <code>div</code> is effectively a page) and you navigate through them using links and hashes; <code>&lt;a href="#work"&gt;&lt;/a&gt;</code> will scroll you to the page (full height <code>div</code>) with the <code>id</code> of <code>work</code>.</p>
  
  <p>What I'm now trying to do is to use keypresses for navigation as well, so you can simply navigate through each page by pressing the up and down arrows.</p>
  
  <p>I figured I could use a switch statement for this? what I'm having trouble with is making it dynamic. The way I thought of doing it was to use <code>window.location</code> and add the new hash onto the end every time a key was pressed, therefore going to the location with the corresponding <code>id</code>. </p>
  
  <p>Using <code>if</code> statements I can do something like this..</p>
  
  <pre><code>  var hash = window.location.hash.substring(1), // get hash for current page
    url  = window.location.pathname; // get url
  
    if (hash == 'home' &amp;&amp; e.keyCode == 40) { 
      window.location = url+'#about' // update location with new hash
    } 
  </code></pre>
  
  <p>but I can't think how to do it using a switch statement. I need some way of checking the next hash to go to rather than setting it manually. I did some googling and found <code>nextAll</code> and thought I could use this to find the <code>attr</code> of the next <code>div</code> like so..</p>
  
  <pre><code>var hash = $('.what').nextAll('div:first').attr('id').substring(5);
  hash = '#'+hash;
  </code></pre>
  
  <p>this works but obviously its only looking for the first <code>div</code> and won't update each time, how can I go about getting the next <code>div</code> so I can use a <code>switch</code> statement like so?</p>
  
  <pre><code>$(document).keydown(function(e) {
  
    switch (e.which) {
      case 37: window.location = url //url is equal to the next hash location
          break;
      case 38: window.location = url //url is equal to the previous hash location
          break;
    }
  });
  </code></pre>
  
  <p><strong>HTML</strong>    </p>
  
  <pre><code>&lt;div id="work_1" class="what scrollv"&gt;
      &lt;div class="wrap"&gt;
          &lt;h2&gt;work 1&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="work_2" class="what scrollv"&gt;
      &lt;div class="wrap"&gt;
          &lt;h2&gt;work 2&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="work_3" class="what scrollv"&gt;
      &lt;div class="wrap"&gt;
          &lt;h2&gt;work 3&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas anyone? I really don't want to use a long if else statement! </p>