如何结束 .empty()

Question

我在一个函数上有一个数组（allArr）数组，第一次从位置 0 的 allArr 的数组是从位置 0 的图像从另一个数组的图像（命名图像）'因为 document.ready 然后点击来自 allArr 的按钮 (id="nextimageandshuffle") 数组和来自图像数组的图像达到第五位。我的问题是每次单击下一个按钮时，我必须使用 empty() 清除 div(id="array") 其中来自 allArr 的数组添加了 append() 但我不能在第 5 个数组之后停止它，所以第 5 个图像（来自图像数组）仍然存在，但第 5 个数组（来自 allArr）它被删除了......

这是我的代码：

var allArr;
var contor = 0;
var i = 0;

$(document).ready( function() { 

    var arr = new Array("images/alfabet/w.png", "images/alfabet/f.png", "images/alfabet/v.png", "images/alfabet/a.png", "images/alfabet/b.png", "images/alfabet/p.png", "images/alfabet/o.png", "images/alfabet/r.png");
    var baiat = new Array("images/alfabet/p.png", "images/alfabet/b.png", "images/alfabet/a.png", "images/alfabet/aa.png", "images/alfabet/i.png","images/alfabet/a.png", "images/alfabet/t.png");
    var colac = new Array("images/alfabet/g.png", "images/alfabet/c.png", "images/alfabet/u.png", "images/alfabet/o.png", "images/alfabet/l.png", "images/alfabet/a.png", "images/alfabet/c.png");
    var slapi = new Array("images/alfabet/s.png", "images/alfabet/ss.png", "images/alfabet/l.png", "images/alfabet/a.png", "images/alfabet/b.png", "images/alfabet/p.png", "images/alfabet/i.png", "images/alfabet/i.png");
    var umbrela = new Array("images/alfabet/u.png", "images/alfabet/n.png", "images/alfabet/m.png", "images/alfabet/p.png", "images/alfabet/b.png", "images/alfabet/r.png", "images/alfabet/e.png", "images/alfabet/l.png", "images/alfabet/a.png");
    allArr = new Array(arr, baiat, colac, slapi, umbrela);
    for(i=0; i<allArr[0].length; i++) 
    {
        var img = new Image();
                    img.src = allArr[0][i];
            $('#array').append(img);

        }
});

var image = new Array("images/baiat.png", "images/colac.png" , "images/slapi.png" , "images/umbrela.png");

var imgNumber=0; 

var numberOfImg = image.length;

function nextImage(){
  if(imgNumber < numberOfImg){
    imgNumber++;
    }
  document.slideImage.src = image[imgNumber-1];

   contor++; 

   $("#array").empty();


   for(i = 0; i<allArr[contor].length; i++) 
    {
        var img = new Image();
        img.src = allArr[contor][i];
        $('#array').append(img);

    }


 }

if(document.images){

   var image1 = new Image();
   image1.src = "images/vapor.png";
   var image2 = new Image();
   image2.src = "images/baiat.png";
   var image3 = new Image();
   image3.src = "images/colac.png";
   var image4 = new Image();
   image4.src = "images/slapi.png";
   var image5 = new Image();
   image5.src = "images/umbrela.png";

   }

HTML：

<img src="images/vapor.png" name="slideImage" class='secondcanvas' width='450' height='300' alt="">
       <div id="array" class='thirdcanvas'></div>  
<a href="#" onClick="nextImage()"><img id="nextimageandshuffle" src="images/nextBtn.png" title="Continuare" ></a>

Answer 1

我不确定我是否完全理解你想要做什么，但我想我明白了......

您需要确定您是否在最后一张图片上，因为如果不是，您仍想清空该元素。将当前图像 src 与 allArr[4][4] 中的字符串进行比较，如果它们匹配，则不要执行 .empty()。所以不仅仅是：

$("#array").empty();

你会想用类似的东西替换它：

if(img.src == allArr[4][4]){
    return;
}else{
    $("#array").empty();
}

Answer 2

不确定我是否真的了解您的问题。但是，如果您想在调用empty() 后保留div 标记中的最后一张图片，则只需再次附加它即可：

$("#array").empty();
var lastImage = new Image();
lastImage.src = allArr[4][4];
$("#array").append(lastImage);

请告诉我这是否有帮助。