javascript - 在 mousemove 上翻阅图像

Question

我正在尝试通过更改与鼠标位置相关的图像的 z-index 属性，使用 mousemove 函数翻阅一堆图像。我收到控制台错误，不知道是什么原因造成的。我在代码中添加了一些注释以使其更加清晰。我刚开始使用 js，这可能是一个非常简单的错误。

    var $images = $('#images'),  // caching elements
    $img = $('img', $images),
    l = $img.length;  

$('#images').mousemove(function(e){
    var xPos = e.pageX - this.offsetLeft;
    w = $(this).width() / l;
    xPos = Math.floor(xpos / w);  //setting xPos variable equal to the mouse X position.

    $img.css("z-index","0"); //assigning images z-index value to 0
    if (xPos >= 0 && xPos < l) {
        $img[xPos].css("z-index","1"); //changing 'current' (image relevant to xPos) z-index value to 1 !!!console error 'undefined'!!!
    }

});

FIDDLE

Answer 1

问题可以追溯到这一行:

$img[xPos].css("z-index","1");

这是因为您将 $img[xPos] 视为 jQuery 对象，但它实际上返回的是 HTML 节点。你应该去:

$img.eq(xPos).css("z-index","1");

修复它 :) 在这里检查修复的 fiddle :http://jsfiddle.net/teddyrised/0qubpa7a/4/

p/s: 为了安全起见，我也推荐使用 var 声明变量。此外，避免覆盖 xPos 的值，而是分配一个新变量 :)