Question

我有工作代码，根据可用的网页编号和您当前使用的网址设置上一页和下一页。

我的代码太长，根本不灵活。如何让它更灵活，生产准备好？

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

MVC设计建议渲染Next＆amp;服务器上的上一个URL，它知道总共有多少页;

或者至少将预先准备好的“基本URL”和“pageCount”呈现为JS变量，因此在Javascript中生成有效的URL是微不足道的。

JSP中的一个例子：

<script type='text/javascript'>
    var baseUrl = ${baseUrl};
    var numPages = ${numPages};
    var currPage = ${currPage};

    function changePage (delta) {
        var newPage = ((currPage + delta) % numPages);    // 0-based.
        var newUrl = baseUrl + newPage + ".html";
        // var newUrl = baseUrl + newPage;
        window.location = newUrl;
    }

    $(document).load( function(){
        $(".leftArrow a").click( function(){ 
            changePage(-1)});
        $(".rightArrow a").click( function(){ 
            changePage(+1)});
    });

如果您的页码是从1开始的，那么％'模数'表达式必须更复杂（事先减1，后加1）或者你可以做一个if语句。

    function changePage (delta) {               // 1-based PageNumber version.
        var newPage = currPage + delta;    
        if (newPage <= 0) newPage = numPages;
        if (newPage > numPages) newPage = 1;
        // ... as before.

或通过模数：

        var newPage = ((currPage-1 + delta) % numPages) + 1;

选择你觉得最清楚的＆amp;如果你在2年后回到代码中，那么最容易维护！

[已编辑] 如果没有服务器端智能，只需将常量放入JS即可。您还可以将脚本的常量/或计算与脚本的活动部分分开。从而使其可以在多个页面中重复使用。

Answer 2

请参阅此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>

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

Answer 3

如果我理解你的用例，这应该做你想要的：

$(function () {
    var total = 3;        // index.html, index1.html, index2.html
    var currentIndex = 0; // index.html

    var base = '/en_US/';
    var pagename = 'image';   // for pattern: index<number>.html

    function getNavUrl(delta) {
        var newIndex = (currentIndex + delta < 0) ? total - 1 : (currentIndex + delta) % total;
        newIndex = (newIndex === 0) ? '' : newIndex;
        return base + pagename + newIndex + '.html';
    }

    $(".leftArrow a").click(function () {
        window.location = getNavUrl(-1);    // /en_US/index2.html
    });
    $(".rightArrow a").click(function () {
        window.location = getNavUrl(+1);    // /en_US/index1.html
    });
});

带有更详细评论的

版本：http://jsfiddle.net/ppDL7/8/

更新

在弄清楚确切的后果后，这是最终版本。还从document.location.href中添加了索引解析：

$(function () {
    var total = 4;
    var base = '/en_US/';
    var pagename = 'index';   // for pattern: index<number>.html
    var currentIndex; // index.html === index[last].html 

    var href = document.location.href;

    function extractIndex(url){
        var regExp = new RegExp(pagename+'(\\d+)\.html$');
        var match = url.match(regExp);
        var index = match? match[1] : null;  // null if url does not match
        // interpret index.html as index[last].html:
        return (!index)? total : +index; 
    }

    function getNavUrl(delta) {
        var newIndex;
        if(currentIndex +delta <= total){
            newIndex = (currentIndex + delta <= 0) ? total  : (currentIndex + delta) % (total+1);
        } else {
            newIndex =  (delta < 0)? total - delta : delta;
        }
        return base + pagename + newIndex + '.html';
    }

    function setCurrent(index){
        $('.current').html('<b> ' + index + '</b>');    
    }

    currentIndex = extractIndex(href);

    $(".leftArrow a").click(function () {
        window.location = getNavUrl(-1);
    });
    $(".rightArrow a").click(function () {
        window.location = getNavUrl(+1);
    });
});

http://jsfiddle.net/ppDL7/12/

prev / next导航代码更高效，更灵活

3 个答案:

更新