0

我正在尝试为一个网页创建一个简单的画廊，该画廊由用户按下左右箭头键来获取上一个/下一个图像。到目前为止，我的代码如下所示。不过，它似乎对按键没有反应。我检查了控制台，没有错误，让我不知道问题出在哪里。

.image div html 在按键时不会改变 - 有什么想法吗？

$(document).ready(function() {
    var current = 1;
    $("body").keydown(function(e) {
    if(e.keyCode == 37) {
        if (current == 1) {
            var current = 1;
        } else {
            var current = current - 1;
        }
        $('.image').html('<img src="images/' + current + '.jpg"/>');
    }
    else if(e.keyCode == 39) {
        var current = current + 1;
        $('.image').html('<img src="images/' + current + '.jpg"/>');
    }
    });
});

HTML

<body>
    <div class="image">
        <img src="images/1.jpg"/>
    </div>
</body>

我已经对其进行了调整，当前变量在 keydown 上重置。OP 已被编辑 - 这给我留下了当前变量 lisitng NaN.jpg 作为文件名的问题？

4

2 回答 2

1

您current未定义的问题是您在代码的各个范围内重新定义 current 的结果。这是一个棘手的编程错误，称为变量阴影http://en.wikipedia.org/wiki/Variable_shadowing

您应该在一个范围内定义您的变量 current，然后在较低范围内引用它，如下所示：

$(document).ready(function() {
    var current = 1;
    $("body").keydown(function(e) {
        alert(current); 
    if(e.keyCode == 37) {
        if (current == 1) {
            current = 1;
        } else {
            current = current - 1;
        }
        $('.image').html('<img src="images/' + current + '.jpg"/>');
    }
    else if(e.keyCode == 39) {
        current = current + 1;
        $('.image').html('<img src="images/' + current + '.jpg"/>');
    }
    });
});

看到这个工作小提琴http://jsfiddle.net/RTWM6/

于 2013-08-12T19:40:30.993 回答
0

您的代码似乎工作正常。 http://jsfiddle.net/PZnSd/1/

$("body").keydown(function(e) {
var current = 1;
if(e.keyCode == 37) {
    console.log('left arrow');
    if (current == 1) {
        current = 1;
    } else {
        var current = current - 1;
    }
    $('.image').html('<img src="http://placehold.it/350x150"/>');
}
else if(e.keyCode == 39) {
    console.log('right arrow');
    var current = current + 1;
    $('.image').html('<img src="http://placehold.it/350x250"/>');
}
});
于 2013-08-12T19:30:37.393 回答