Question

我试图让下一个按钮在点击时显示下一个图像，但是我将显示所有图像。

如何才能显示下一张要显示的图像而不是所有图像？

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

从.next（） - jQuery返回多个结果

1 个答案: