javascript - 仅检索到最后一行二维数组

Question

数组 slidesArray 是二维数组。它充满了 2 行。问题是当尝试在 jQuery 上使用 (each) 函数时它只得到最后一行。

这是代码：

jQuery.each(slidesArray,function(index,value) {
    $("#slider").show();

    var linkHref = value[1];
    var imageSource = value[0];;

    $("#slider").html(
        "<a href='" + linkHref + "'><img src='"+ imageSource + "'></a>")
        .fadeOut(5000);
}); 

那么，问题或原因是什么？

Answer 1

纠正这个

 $("#slider").html
            (
                "<a href='" + linkHref + "'><img src='"+ imageSource + "'></a>"
            ).fadeOut(5000);

至

 $("#slider").html
            ($("#slider").html()+
                "<a href='" + linkHref + "'><img src='"+ imageSource + "'></a>"
            ).fadeOut(5000);

Answer 2

$("#slider").append("<a href='" + linkHref + "'><img src='"+ imageSource + "'></a>").fadeOut(5000);

“html”应替换为“附加”

Answer 3

看起来你想添加项目以$("#slider")淡出它们然后用新项目替换它们，.html()不等待.fadeOut()，你可以使用.fadeOut()回调来替换淡出后的项目。

function fadeFunc(){
    var i = $("#slider").data('current')+1;
    if (i < slidesArray.length){
        $("#slider").data('current', i);
        var linkHref = slidesArray[i][1];
        var imageSource = slidesArray[i][0];

        $("#slider").html(
            "<a href='" + linkHref + "'><img src='"+ imageSource + "'></a>")
            .fadeOut(5000, fadeFunc);            
    }
} 

$("#slider").data('current', 0)
    .html("<a href='" + slidesArray[0][1] + "'><img src='"+ slidesArray[0][0] + "'></a>")
    .fadeOut(5000, fadeFunc);