Question

<div id="w01">
<img src=qa/01.jpg alt='img'>
<img src=qa/02.jpg alt='img'>
<img src=qa/03.jpg alt='img'>
<img src=qa/04.jpg alt='img'>
</div>

CSS：

#w01 > img{
    display:none;
    width:100%;
}
#w01 > img:first-child{
    display:block;
}

这是起始位置。除第一张图像外，所有图像都被隐藏现在我想用jQuery数组创建一个图库单击“下一步”按钮应移动堆栈底部的第一个图像，然后显示下一个图像。

var arr = $("#w01 > img").toArray();

$('.next').click(function(){
    var first = arr[0];
    arr.shift(first);
    arr[1].show(); //error
});

错误：Uncaught TypeError: undefined is not a function

概念中存在错误，或者只是代码中存在错误，或两者兼而有之？

Answer 1

var arr = $("#w01 > img").toArray();

$('.next').click(function(){
    var first = arr[0];
    arr.shift(first);
    arr[1].show(); //error
});

更改为：

var arr = $("#w01 > img").toArray();

$('.next').click(function(){
    // var first = arr[0];
    // arr.shift(first);
    // $(arr[1]).show(); // This will not show any error. But it will not work as you expected.
    // See A. Wolff's comment for more details.

    // New
    $(arr[0]).hide(); // Hide showing img
    arr.push(arr.shift()); // Shift array
    $(arr[0]).show(); // Show new first img
});

因为arr[1]返回一个纯Javascript DOM，而.show是一个jQuery方法。

使用jQuery数组的图库

1 个答案: