0

我有根据可用页码和您当前所在的 URL 设置 Prev 和 Next 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);
4

3 回答 3

1

MVC 设计建议在服务器上渲染 Next & Prev URL，它知道总共有多少页；

或者至少将预先准备好的“base 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 的，则 % 'modulus' 表达式要么必须更复杂（预先减去 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;

如果您要在 2 年内重新编写代码，请选择您认为最清晰和最可维护的代码！

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

于 2013-05-10T01:34:51.693 回答
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/ )

于 2013-05-10T02:06:16.940 回答
1

如果我正确理解您的用例，这应该可以满足您的要求：

$(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/

于 2013-05-10T03:00:16.380 回答