.next() - jQuery에서 여러 결과가 반환되었습니다.

Question

다음 버튼을 클릭 할 때 다음 버튼을 표시하려고 시도하지만 대신 모든 이미지가 표시됩니다.

모든 이미지 대신 다음 이미지 만 표시하려면 어떻게해야합니까?

JSFiddle

JSFiddle의 이미지는 내가 Imgur에서 촬영 한 모든 이미지입니다, 나는 또한 JSFiddle에 대한 약간 CSS를 변경했습니다. 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