從.next（）返回多個結果（） - jQuery

Question

我試圖讓下一個按鈕在點擊時顯示下一個圖像，但是我得到的是所有顯示的圖像。

我怎樣才能得到下一個圖像來顯示，而不是所有的圖像？

JSFiddle

中的jsfiddle的圖像是我從Imgur拍攝的所有圖像，我也改變了CSS輕微的的jsfiddle。 的HTML：

<div id="main_container"><img src="../Images/Previous.png" id="previous" /><img src="../Images/Cross.png" id="cross" /><img src="../Images/Next.png" id="next" /></div> 
div class="container"> 
<img src="http://i.imgur.com/ZJccCgs.png" class="image" /> 
<img src="http://i.imgur.com/xeJrKM2.jpg" class="image" /> 
<img src="http://i.imgur.com/8B12y3l.jpg" class="image" /> 
<img src="http://i.imgur.com/bjWjYFr.jpg" class="image" /> 
</div> 

的CSS：

.image { 
    width:300px; 
    height:220px; 
} 

.container { 
    display:inline-block; 
} 

.enlarge { 
    width:700px; 
    height:auto; 
    z-index:2; 
    margin:-180px 80px 10px; 
} 

#cross { 
    width:10px; 
    height:10px; 
    float:right; 
    top:0; 
    display:none; 
} 

#next { 
    float:right; 
    top:250px; 
    height:100px; 
    width:50px; 
    display:inline; 
    position:relative; 
} 

#previous { 
    float:left; 
    top:250px; 
    left:10px; 
    height:100px; 
    width:50px; 
    display:inline; 
    position:relative; 
} 

#main_container { 
    width:850px; 
    height:600px; 
    background-color:rgba(64,64,64,0.3); 
    z-index:1; 
    margin:0 auto 10px;; 
    position:relative; 
    z-index:5; 
    top:0px; 
    display:none; 
} 

jQuery的：

$(document).ready(function() { 
    $(".image").dblclick(function() { 
    $("#cross").css("display", "inline-block"); 
    $("#main_container").css("display", "block"); 
    $("#main_container .image").remove(); 
    $(this).clone().appendTo("#main_container"); 
    $("#main_container .image").addClass("enlarge"); 
}); 
$("#next").click(function() { 
    $("#main_container .image").remove(); 
    $(".image").closest(".image").clone().appendTo("#main_container").addClass("enlarge"); 
}); 
    $("#cross").click(function() { 
    $("#main_container .image").remove(); 
    $("#cross").css("display", "none"); 
    $("#main_container").css("display", "none"); 
}); 

$(document).keyup(function (e) { 
    if (e.which == '27') { 
    $("#main_container .image").remove(); 
    $("#cross").css("display", "none"); 
    $("#main_container").css("display", "none"); 
    } 
    }); 
}); 

Answer 1

嘗試

$(document).ready(function() { 
    $(".image").dblclick(function() { 
     $("#cross").css("display", "inline-block"); 
     $("#main_container").css("display", "block"); 
     $("#main_container .image").remove(); 
     $(".image.current").removeClass('current'); 
     $(this).addClass('current').clone().appendTo("#main_container"); 
     $("#main_container .image").addClass("enlarge"); 
    }); 
    $("#main_container").on('click', 'img', function() { 
     $(".image.current").next().triggerHandler('dblclick'); 
    }); 
    $(document).keyup(function (e) { 
     if (e.which == '27') { 
      $("#main_container .image").remove(); 
      $("#cross").css("display", "none"); 
      $("#main_container").css("display", "none"); 
     } 
    }); 
}); 

演示：Fiddle