javascript - JS无法读取即将到来的数组元素

目标是在#left div框中从JSON文件创建导航。根据#right div框中的文件层次结构，应该有指向上一页/下一页的链接。

我的实现运行异常。当您单击导航中的链接时，只会显示上一页的链接。通过单击所述上一个链接，到下一页的链接也在更新。浏览这2个上一个/下一个链接是可行的。一旦切换回左侧导航，下一页链接将不再更新。前一个仍然如此。
自己尝试一下：
http://jsfiddle.net/cxdL3/6/

从我发现的问题是，读取数组（[subchap + 1]）前面的元素并不总是有效。这让我感到困惑，因为应该在调用函数之前先将其加载。

您对此行为有解释吗？这两个链接也基本上以相同的方式创建。

var chap; //position in the array of the currently open chapter
var subchap; //position in the array of the currently open subchapter

function update_right() {
    var path = data.chapter[chap].subchapter;
    //Previous Page
    if(subchap > 0) {
        $("#prev").html("<b>Previous: </b><a href='"+path[subchap-1].url+"'>"+path[subchap-1].title+"</a><br/>");
        $("#prev > a").click(back);
    } else { //subchap == 0
        $("#prev").html("");
    };

    //Next Page
    if(subchap+1 < path.length) {
        $("#next").html("<b>Next: </b><a href='"+path[subchap+1].url+"'>"+path[subchap+1].title+"</a><br/>");
        $("#next > a").click(next);
    } else {
        $("#next").html("");
    }
}

function back() {
    subchap--;
    update_right();
}

function next() {
    subchap++;
    update_right();
}

$(document).ready(function() // DOM needs to exist in order to be able to add stuff in there
{

//... Navigation created ...

    //------ onClick Navigation
    $('#left > ul > li > a').click(
        function()
        {
            chap = $(this).attr("data-chap");
            subchap = $(this).attr("data-subchap");
            update_right();
        }
    );
});

其余文件是非常标准的。如果它们很重要，可以在这里找到：http://fabitosh.bplaced.net/SkriptET_iFrame_v3/

最佳答案

在点击处理程序中获取chap和subchap值时，将它们获取为整数而不是字符串：

chap = parseInt($(this).attr("data-chap"), 10);
subchap = parseInt($(this).attr("data-subchap"), 10);

这样chap + 1之类的东西在1时成为chap == 0，而不是"01"时成为chap == "0"

更新的示例：http://jsfiddle.net/cxdL3/10/