Question

我在这里有点腌菜，我现在已经谷歌了一段时间，但似乎无法找到我想要的东西，所以我希望你们能提供帮助。

我想创建一个唯一网址的列表/数组，我可以使用下一个/上一个按钮进行导航。

这样的事情：

var caseList = [
    'case-name-of-some-client.html',
    'case-another-client-name.html',
    'case-one-more-client-name.html',
    'case-last-client-name.html'
];
<a href="#" onClick="caseListGotoNextUrl">Next</a>
<a href="#" onClick="caseListGotoPreviousUrl">Previous</a>

示例：我在www.mydomain.com/case-another-client-name.html上，然后单击“下一步”，它会检查地址栏中的网址，并转到www.mydomain.com/case-one -more-client-name.html，因为它在列表中的下一个，反之亦然，如果我单击Previous。

如果它可以循环也会很好，所以当它在列表的末尾时，我再次转到第一个URL，反之亦然。

我是所有这些js的总菜鸟，所以任何帮助都会受到赞赏。

干杯，詹斯

P.S。我正在使用jquery。

Answer 1

试试这个

var caseList = [
    'case-name-of-some-client.html',
    'case-another-client-name.html',
    'case-one-more-client-name.html',
    'case-last-client-name.html'
];
var iCount=0;
function caseListGotoNextUrl(){
  iCount++;
  if(iCount === 3) iCount=0;
  $(this).attr('href', caseList[iCount]); 
}

function caseListGotoPreviousUrl(){
 iCount--;
 if(iCount<0) iCount=3;
 $(this).attr('href', caseList[iCount]); 
}

Answer 2

将这些代码放在列表中的每个页面上（您可以在每个页面上简单地包含jquery部分）：

HTML：

<a href="" class="next">Next</a>
<a href="" class="prev">Previous</a>

JQuery的：

    $( document ).ready(function() {
    var caseList = [
    'case-name-of-some-client.html',
    'case-another-client-name.html',
    'case-one-more-client-name.html',
    'case-last-client-name.html'
];

    current=$(location).attr('pathname').substr($(location).attr('pathname').lastIndexOf("/")+1); // get current page: just last part - page name and extension
    if($.inArray(current, caseList)!==-1) { //check if it is in array
        index=$.inArray(current, caseList);
    }
    //navigate thorough pages...
    $( ".next" ).click(function() {
    if(index<caseList.length){
    next=caseList[index+1];
    window.location.href = next;
    }
    });

    $( ".prev" ).click(function() {
    if(index>=0){
    prev=caseList[index-1];
    window.location.href = prev;
    }
    });

    });

Answer 3

在朋友的帮助下:)我们想出了这个

/** Next/prev case **/
var caseList = [
    'case-bang-and-olufsen.html',
    'case-bang-and-olufsen-02.html',
    'case-bang-and-olufsen-03.html'
];



current=$(location).attr('pathname').substr($(location).attr('pathname').lastIndexOf("/")+1); // get current page: just last part - page name and extension
if($.inArray(current, caseList)!==-1) { //check if it is in array
    index=$.inArray(current, caseList);
}

$(".arrow-right").click(function(){

    var CSL = caseList.length; //CaselistArray length - 1
    var CC = 0; //CurrentCASE

    CC  = index;
    next  = caseList[CC +1];

        if(CC < CSL-1){
            next = caseList[CC +1];
            window.location.href = next;
        }
        else{
            next = caseList[0];
            window.location.href = next;
        }
});

$(".arrow-left").click(function(){

    var CSL = caseList.length; //CaselistArray length - 1
    var CC = 0; //CurrentCASE

    CC  = index;
    prev  = caseList[CC -1];

    if(CC > 0){
        prev = caseList[CC -1];
        window.location.href = prev;
    }
    else{
        prev = caseList[CSL-1];
        window.location.href = prev;
    }
});

下一页/上一页导航通过预定义的HTML页面列表

3 个答案: