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");

修正了:)在这里查看固定小提琴：http://jsfiddle.net/teddyrised/0qubpa7a/4/

p / s：为了安全起见，我还建议使用var语句声明变量。另外，请避免覆盖xPos的值，而是指定一个新变量:)

在mousemove上翻看图像

1 个答案: