奇怪的行爲與.next（）和一個簡單的幻燈片與jQuery

Question

我一直撞我的頭靠牆與這一個現在幾個小時 - 沒有運氣。總之，我似乎無法從下一個（）jQuery方法中獲得所需的功能。我試圖在點擊圖片時使DOM中的下一個img標籤出現。

$(images).each(function(i){ 

    $('#images').append($(this).css({ 

     'display':(i) ? 'none' : 'in-line' 

    }).click(function(){ 

     $(this).next().css({'display':'in-line'}); 

     $(this).css({'display':'none'}); 

    })); 
}); 

所需的圖像消失，但'next（）'不顯示。什麼是大想法？這裏的環境：

<div id="images"> 
    <img src="imgs/1.jpg" style="width: 333.33333333333337px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666669px; display: none; "> 
    <img src="imgs/2.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; "> 
    <img src="imgs/3.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; "> 
    <img src="imgs/4.jpg" style="width: 333.3333333333333px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -166.66666666666666px; display: none; "> 
    <img src="imgs/7.jpg" style="width: 500px; height: 333.3333333333333px; position: absolute; top: 50%; left: 50%; margin-top: -166.66666666666666px; margin-left: -250px; display: none; "> 
</div> 

這是事實，這些元素是通過jQuery動態創建的事實嗎？值得注意的是，動態創建元素的迭代僅在圖像加載完成後纔會啓動。

謝謝。

Answer 1

其inline不in-line

$(this).next().css({'display':'inline'});