Question

我正在尝试为网页创建一个简单的图库，其中包含用户按下左右箭头键，将其带到上一个/下一个图像。到目前为止，我有如下所示的代码。但它似乎没有响应按键。我检查了控制台，没有任何错误，让我不知道问题是什么。

.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作为文件名的问题？

Answer 1

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/

Answer 2

您的代码似乎运行正常。 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"/>');
}
});

箭头键按下语句无法正常运行

2 个答案: