Jquery 单击div隐藏，然后在第页显示下一个div？

请看

我已经开始整理这个提琴来尝试和解决我如何能够，用一个非常简单的jQuery，在页面加载时显示第一个全屏图像，然后当用户点击这个图像时，它被隐藏，页面上的下一个图像被显示，等等通过许多图像。我知道我可以给他们所有的个人id，然后写一段很长的代码，说明每个div，但我想知道如何以更整洁的方式完成这项工作

  $('#img1').click(function() {
  $('#img2').show();
  $('#img1').hide();
  });

---

您可以使用JQuery的动画api，该api可以找到。

我根据您的代码制作了一个非常简单的小提琴。 使用

.show（）

和

.hide（）

为图像设置动画，直到最后一个。然后动画停止，因为没有图像了

---

退房。

你可以这样使用

$('#img2').hide();
 $('#img1').click(function() {
  $('#img2').toggle();
  $('#img1').toggle();
  });

---

根据您的提琴样本，您可以尝试以下方法：

$('.full').click(function () {
    $(this).hide();
    $(this).next('.full').show();
});

注意：这只适用于一次迭代。如果你想让它循环，我们可以修改代码

编辑：要使循环正常工作，请按如下所示修改代码。基本上，我们检查是否有

下一个
元素（
div
包含
img
）和
.full
类。如果它存在，我们将显示它。否则，我们用
.full
类显示
第一个元素

$('.full').click(function () {
    $(this).hide();
    if($(this).next('.full').length === 1)
        $(this).next('.full').show();
    else
        $('.full').eq(0).show();
});

我不是JQuery的英雄，但希望这能帮助您：

HTML:

还有一个。
这个效果很好，试试这个

$('.full').not(':first').hide();
 $('.full').click(function(){
        $(this).hide();
        $(this).next().show();
 });

将所有要显示的图像放在一个数组中。然后在数组上迭代，从而更改图像的src值。在数组的每次迭代中使用.show（）和.hide（）。它的行为是否像循环（或）您只需要一次迭代？谢谢，你的小提琴可以工作，但当我把它传输到我的文件时，我松开了全屏显示，它点击到下一张图像，但突然弹回到第一张图像，然后消失。我可能做错了什么？@angela:我已经更新了答案。请看一下，让我知道它是否适合你。
$(document).ready( function() {
    $(".imageBox img").hide();
    $(".imageBox img:first-child").show();
});

$(".imageBox img").on( "click", function() {
    if( $(this).next().length > 0 ) {
        $(this).hide();
        $(this).next().show();
    }
    else {
        $(this).hide();
        $(".imageBox img:first-child").show();
    }
});

$('.full').not(':first').hide();
 $('.full').click(function(){
        $(this).hide();
        $(this).next().show();
 });