刪除最後一個元素後追加

Question

我有以下的地方#maincontent包含一些圖像，將加載到#gallery。現在的問題是，如果我點擊#maincontent img並且很多次將不同的圖像加載到#gallery中，則加載只是變得越來越拖沓。是因爲當我點擊下一張圖片時，它只是在上一張圖片的頂部，圖片隨着時間的推移而堆積如山？我不是很熟悉.append()和.last()，我只是想知道如何在加載最新的圖像後刪除先前加載的圖像。我試過$('img:last-child', this).remove()，但它似乎沒有工作，所以我只是想知道我是否在正確的軌道上。

$('#maincontent img').click(function(){ 
    $myFile = $(this).attr('src'); 
    $('#gallery').append('<img src="'+$myFile+'" />'); 
    $('#gallery img').last().css('display','none').fadeIn(); 

Answer 1

.append剛過對方添加圖像內#gallery，後來你只是躲在最後一個與您的代碼。這意味着您的頁面將加載所有圖像，但只顯示最後一個圖像。

但是，如果你想只顯示最新的圖像，你可以清除#gallery並添加新的圖像：

$('#content').find('img').removeClass('lastitem');//we will add this class to the new image item, so we clear it from the previous images if any 

var $image = $('<img class="lastitem" src="http://armagetron.co.uk/mods/images/sky1.png" />'); 
$image.hide();//hide the image first 
$('#content').append($image);//append the hidden image 

$image.fadeIn(800, function() {//show the image, when it is shown, hide the rest of it 
    $('#content').find('img').not('.lastitem').fadeOut(500, function() { 
     $(this).remove(); 
    }); 
}); 

DEMO：https://jsfiddle.net/erkaner/ma6LjfkL/1/

第二種方法：.prevAll

$('a').click(function() { 
    var $image = $('<img class="lastitem" src="http://armagetron.co.uk/mods/images/sky1.png" />'); 
    $image.hide(); 
    $('#content').append($image); 

    $image.fadeIn(800, function() { 
     $image.prevAll().fadeOut(500, function() { 
      $(this).remove(); 
     }); 
    }); 
}) 

DEMO：http://jsfiddle.net/erkaner/ma6LjfkL/1/