0

利用可能なページ番号と現在の 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);
4

3 に答える 3

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();
    }
}

そして、すべての でonLoadindex.htmlを呼び出しますupdateNav()

<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 に答える
1

MVC の設計では、サーバー上で次と前の 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 ベースの場合、% '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 に答える