数组问题中的Jquery索引

Question

我有这个代码。如果您单击下一个按钮然后单击上一个然后单击下一个，那么上一个索引输出就会混淆。

例如。当页面加载时，索引为 0。然后当我单击下一个时，索引为 1。然后我单击上一个，它又回到 0。到目前为止一切都很好，但是当我再次单击下一个时，它变成 2，这把一切都搞砸了。

认为这可能是由于...

if (index < 0) {
        index = lengthMinusOne;
};

这几天一直在努力。请帮忙。非常感谢。

//Image Gallery
var imgs = [
    ['images/test1.jpg', 'Test1', 'sdfsdfsdfsdf', 'light'],
    ['images/test2.jpg', 'Test2', 'sdfsdfsdf', 'light'],
    ['images/Test3.jpg', 'Test3', 'sdfsdfsdfsd.', 'dark']
];

var cnt = imgs.length;
var lengthMinusOne = cnt - 1,
    index = 0,
    fadeSpeed = 1000;

preload_image_object = new Image();
var i = 0;
for (i = 0; i <= cnt; i++)
preload_image_object.src = imgs[i];
$("#txt h1").text(imgs[0][1]);
$("#txt #desc p").text(imgs[0][2]);
var ld = imgs[0][3];
if (ld == "dark") {
    $("body").addClass("dark");
};
var firstImg = $('<img />');
$(firstImg).attr('src', imgs[0][0]);
$('#supersized').append(firstImg);
$(firstImg).hide().fadeIn(fadeSpeed);
$("#prev-photo").bind('click', prev);

function prev() {
    index--;
    $('#prev-photo,#next-photo').unbind();
    if (index < 0) {
        index = lengthMinusOne;
    };
    var ld = imgs[index][3];
    if (ld == "dark") {
        $("body").addClass("dark");
    } else {
        $("body").removeClass("dark");
    };
    oldImg = $('#supersized img').addClass('old');
    $("#txt h1").text(imgs[index][1]).hide().fadeIn();
    $("#txt #desc p").text(imgs[index][2]).hide().fadeIn();
    var img = new Image();
    $(img).load(function () {}).error(function () {}).attr('src', imgs[index][0]);
    $('#supersized').append(img);
    $('#supersized img').css('left', '0');
    $(img).hide().fadeIn(fadeSpeed, function () {
        oldImg.remove();
        $('#prev-photo').bind('click', prev);
        $('#next-photo').bind('click', prev);
    });
    console.log(index);
};
$("#next-photo").bind('click', next);

function next() {
    index++;
    $('#next-photo,#prev-photo').unbind();
    if (index > lengthMinusOne) {
        index = 0
    };
    var ld = imgs[index][3];
    if (ld == "dark") {
        $("body").addClass("dark");
    } else {
        $("body").removeClass("dark");
    };
    oldImg = $('#supersized img').addClass('old');
    $("#txt h1").text(imgs[index][1]).hide().fadeIn();
    $("#txt #desc p").text(imgs[index][2]).hide().fadeIn();
    var img = new Image();
    $(img).load(function () {}).error(function () {}).attr('src', imgs[index][0]);
    $('#supersized').append(img);
    $('#supersized img').css('left', '0');
    $(img).hide().fadeIn(1300, function () {
        oldImg.remove();
        $('#next-photo').bind('click', next);
        $('#prev-photo').bind('click', prev);
    });
    console.log(index);
};

Answer 1

在prev 中重新应用它们时，您将两个处理程序绑定到prev 函数。

$(img).hide().fadeIn(fadeSpeed, function () {
    oldImg.remove();
    $('#prev-photo').bind('click', prev);
    $('#next-photo').bind('click', prev);
});

应该是：

$(img).hide().fadeIn(fadeSpeed, function () {
    oldImg.remove();
    $('#prev-photo').bind('click', prev);
    $('#next-photo').bind('click', next);
});

我会将此代码（以及任何其他重复代码）抽象为它自己的函数，并从prev 和next 调用它。