javascript - 上一个/下一个导航代码更加高效和灵活

Question

我有工作代码，可以根据可用页码和您当前所在的 URL 设置上一个 URL 和下一个 URL。

我的代码太长而且一点也不灵活。如何使其更加灵活并为生产做好准备？

http://jsfiddle.net/sunflowersh/ppDL7/5/

var currentindex = '4'; //updated based on the current index data 

var indexNum = parseInt(currentindex);
var currentURL  =      document.location.href.substring(document.location.href.lastIndexOf("/")+1, document.location.href.length);

var baseURL ="/en_US/";

var leftURL = "";
var rightURL = "";

switch(indexNum)
{
case 2: 
// if there are only index, index1, and index2

if((currentURL.indexOf("index.html")>-1)||(currentURL.indexOf("index.")>-1)){
 leftURL= baseURL + "index" + parseInt(indexNum+1) + ".html";
 rightURL= baseURL + "index" + parseInt(indexNum+1) + ".html";
 } else {
 leftURL= baseURL + "index" + parseInt(indexNum-1) + ".html";
 rightURL= baseURL + "index" + parseInt(indexNum+1) + ".html";
 }
break;
case 3:

// if on index3.html or index.html
// make the right arrow URL go back to index1.html

if((currentURL.indexOf("index3.html")>-1)||(currentURL.indexOf("index.")>-1)){
 leftURL= baseURL + "index" + parseInt(indexNum-1) + ".html";
 rightURL= baseURL + "index" + parseInt(indexNum-2) + ".html";
 } else {
 leftURL= baseURL + "index" + parseInt(indexNum-1) + ".html";
 rightURL= baseURL + "index" + parseInt(indexNum+1) + ".html";
 }
 break;
case 4:
if((currentURL.indexOf("index4.html")>-1)||(currentURL.indexOf("index.")>-1)){
 leftURL= baseURL + "index" + parseInt(indexNum-1) + ".html";
 rightURL= baseURL + "index" + parseInt(indexNum-3) + ".html";
 } else {
 leftURL= baseURL + "index" + parseInt(indexNum-1) + ".html";
 rightURL= baseURL + "index" + parseInt(indexNum+1) + ".html";
  }
 break;
 case 5:
 if((currentURL.indexOf("index5.html")>-1)||(currentURL.indexOf("index.")>-1)){
 leftURL= baseURL + "index" + parseInt(indexNum-1) + ".html";
 rightURL= baseURL + "index" + parseInt(indexNum-3) + ".html";
 } else {
 leftURL= baseURL + "index" + parseInt(indexNum-1) + ".html";
 rightURL= baseURL + "index" + parseInt(indexNum+1) + ".html";
 }
 break;
 default:
 // if no current index, disable the link
 leftURL= baseURL + "#";
 rightURL= baseURL + "#";

 }

 var leftArrow =$(".leftArrow").find("a").attr("href",leftURL);
 var rightArrow =$(".rightArrow").find("a").attr("href",rightURL);

Answer 1

看看这个 http://jsfiddle.net/steelywing/ppDL7/6/

创建一个index.js

var baseURL = "/en_US/index";
var maxIndex = 4;
function updateNav(index) {
    if (index-1 > 0) {
        $('.leftArrow a').attr('href', baseURL + (index-1) + '.html');
    } else {
        $('.leftArrow a').hide();
    }

    if (index+1 <= maxIndex) {
        $('.rightArrow a').attr('href', baseURL + (index+1) + '.html');
    } else {
        $('.rightArrow a').hide();
    }
}

并且，在每个 index.html 中，调用 updateNav() onLoad

<script>updateNav(2); // 2 current index </script>

如果您需要解析 URL，请尝试使用 RegExp /\/index(\d+)\.html$/ ( http://jsfiddle.net/steelywing/uex5m/ )