Question

我有这个代码。如果你单击下一个按钮，然后单击prev然后单击下一个按钮，然后前一个索引输出混淆。

EG。当页面加载时，索引为0.然后当我单击下一步时索引为1.然后我单击prev并返回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调用它。

数组问题中的Jquery索引

1 个答案: