無法創建點擊幻燈片

Question

我在jQuery中創建點擊幻燈片時遇到了問題。我有一個5圖像顯示，你可以點擊其中的任何一個，圖像將覆蓋屏幕。但是在彈出圖像後，我想單擊控制器以顯示下一個圖像，而不會從當前圖像中出來。

這裏是我的HTML代碼中的圖像

<div class="img-container"> 

    <div class="box-img" > 
     <img src="images/cold.jpg" alt="kikiliDesigns" id="1"> 
    </div> 

    <div class="box-img "> 
     <img src="images/dear.jpg" alt="kikiliDesigns" id="2"> 
    </div> 

    <div class="box-img"> 
     <img src="images/polar.jpg" alt="kikiliDesigns" id="3"> 
    </div> 

    <div class="box-img "> 
     <img src="images/fishing.jpg" alt="kikiliDesigns" id="4"> 
    </div> 

    <div class="box-img"> 
     <img src="images/bird.jpg" alt="kikili" id="5"> 
    </div> 

</div> 

，我已經創建了一個容器，在圖像顯示：

<div class="img-display"> 
</div> 

這裏是js代碼。

$('.box-img').each(function(){ 
    $(this).click(function(){ 
     var el = $(this).find(':first-child').clone(); 
     $('.img-display').append(el); 
    }); 
    }); 

當用戶點擊結束標記圖像從img-display移除以允許下一個圖像是克隆，並加入到容器中。

Answer 1

（這不是一個完整的答案，但堆棧溢出不會讓我作出評論，因爲我沒有足夠的聲譽）

在你的代碼塊的使用each是有點怪：

$('.box-img').each(function() { 
    $(this).click(function() { 
     var el = $(this).find(':first-child').clone(); 
     $('.img-display').append(el); 
}); 

使用each將導致您的.box-img元素的點擊處理程序只有each環（所以一旦each循環完成運行後，單擊處理程序將不復存在）的範圍之內。您應該能夠用以下內容替換它：

$('.box-img').click(function() { 
    var el = $(this).find(':first-child').clone(); 
    $('.img-display').append(el); 
}); 

希望能解決您的問題。