按箭头键语句功能不正常

Arrow key press statement not functioning correctly

本文关键字：功能 不正常 语句      更新时间：2023-09-26

我试图为一个网页创建一个简单的图库，其中包括用户按下左箭头键和右箭头键，获取上一个/下一个图像。到目前为止，我的代码如下所示。不过，它似乎对按键没有反应。我已经检查了控制台，没有任何错误，让我陷入了问题所在。

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

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

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

$(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/

您的代码似乎运行良好。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"/>');
}
});
相关文章：