显示/隐藏divs jQuery

我想在一页上有4-8个“隐藏”div。然后还有两个按钮，一个“加”和一个“删除”。当我点击“加号”按钮时，它会显示第一个div，如果我再次点击“加号”按钮，它会显示div nr 2。如果我使用“remove”，它会删除div

我必须使用条件语句吗？或者有什么简单的解决方法吗

 $(document).ready(function() {
 $('#show').click(function () {
    $("#hiddencontent").fadeIn("slow");
  });
});

---

下面的代码将显示第一个div并显示none

    $(document).ready(function() {   
        $('#show').click(function () {       
            $("div").filter(function() { 
                 return $(this).css("display") == "none" 
            }).first().show();
        });

隐藏最后显示的div

      $('#remove').click(function () {  
            $("div").filter(function() { 
                 return $(this).css("display") !== "none" 
            }).last().hide();
        });
    });

---

下面的代码将显示第一个div并显示none

    $(document).ready(function() {   
        $('#show').click(function () {       
            $("div").filter(function() { 
                 return $(this).css("display") == "none" 
            }).first().show();
        });

隐藏最后显示的div

      $('#remove').click(function () {  
            $("div").filter(function() { 
                 return $(this).css("display") !== "none" 
            }).last().hide();
        });
    });

---

ID

是唯一的，您不能重复使用它们，请将

ID=“hiddencontent”

更改为

class=“hiddencontent”

，然后执行以下操作

$（文档）.ready（函数（）{
var指数=0；
$（“#显示”）。单击（函数（）{
$（'div'）.eq（index）.fadeIn（'slow'）；
如果（索引<$（'div'）。长度）{
索引++；
}否则{
警报（“不再有隐藏内容！”）；
}
});
$（“#删除”）。单击（函数（）{
$（'div'）.eq（索引-1）.remove（）；
});
});​

jQuery的

.eq（）

有一个

零基索引

。我们在click函数之外设置了一个变量，但仍然可以在click的范围内使用，并按顺序切换hiddencontent。当我们单击时，它会将索引从

0>1>2>3

，依此类推。我们检查索引是否小于与类

hiddencontent

匹配的当前元素数，如果通过，我们将索引迭代到下一个整数

remove函数不需要更改迭代器，因为它只想删除最后一个索引项（根据您的场景，我可以确定）

---

应该这样做。

ID

是唯一的，您不能重复使用它们，请将

ID=“hiddencontent”

更改为

class=“hiddencontent”

，然后执行以下操作

$（文档）.ready（函数（）{
var指数=0；
$（“#显示”）。单击（函数（）{
$（'div'）.eq（index）.fadeIn（'slow'）；
如果（索引<$（'div'）。长度）{
索引++；
}否则{
警报（“不再有隐藏内容！”）；
}
});
$（“#删除”）。单击（函数（）{
$（'div'）.eq（索引-1）.remove（）；
});
});​

jQuery的

.eq（）

有一个

零基索引

。我们在click函数之外设置了一个变量，但仍然可以在click的范围内使用，并按顺序切换hiddencontent。当我们单击时，它会将索引从

0>1>2>3

，依此类推。我们检查索引是否小于与类

hiddencontent

匹配的当前元素数，如果通过，我们将索引迭代到下一个整数

remove函数不需要更改迭代器，因为它只想删除最后一个索引项（根据您的场景，我可以确定）

---

这样就可以了。

您可以尝试以下方法

$("div:hidden").first().show();

及

---

你可以试试类似的东西

$("div:hidden").first().show();

及

---

为您的div设置一个公共类以便于选择，然后您可以执行以下操作：

var $divs = $(".hideShow").hide(); // cache a reference to the relevant divs,
                                   // and start with them hidden
$("#show").click(function() {
    $divs.filter(":hidden").first().fadeIn();
});
$("#hide").click(function() {
    $divs.not(":hidden").last().fadeOut();
});​

演示：

---

允许您仅操纵隐藏的，或仅操纵隐藏的。（当然，您也可以使用…）

为您的div设置一个公共类以便于选择，然后您可以执行以下操作：

var $divs = $(".hideShow").hide(); // cache a reference to the relevant divs,
                                   // and start with them hidden
$("#show").click(function() {
    $divs.filter(":hidden").first().fadeIn();
});
$("#hide").click(function() {
    $divs.not(":hidden").last().fadeOut();
});​

演示：

允许您仅操纵隐藏的，或仅操纵隐藏的。（当然，您也可以使用…）

CSS

HTML

CSS

HTML

下面是一个使用

.hidden

（坏名称）类的简单示例，用于隐藏、显示和再次隐藏的元素。然后我使用

：hidden

和

：visible

选择器

$("#add").click(function() {
    $(".hidden:hidden").first().show();
});

$("#remove").click(function() {
    $(".hidden:visible").last().hide();
});

下面是一个使用

.hidden

（坏名称）类的简单示例，用于隐藏、显示和再次隐藏的元素。然后我使用

：hidden

和

：visible

选择器

$("#add").click(function() {
    $(".hidden:hidden").first().show();
});

$("#remove").click(function() {
    $(".hidden:visible").last().hide();
});

检查这个

var index = -1;
var max = $('.container > div').length;
$('#show').on('click', function() {
    if (index + 1 > max) {
        // Do Nothing
    } else {
        if (index < max - 1) {
            index++;
            $('.container > div:eq(' + index + ')').show();
        }


    }
});

$('#hide').on('click', function() {
    if (index == -1) {
        index = 0;
    }
    else {
        if ($('.container > div:eq(' + index + ')').is(':visible')) {
            $('.container > div:eq(' + index + ')').hide();
            index--;
        }
    }
});​

var指数=-1；
var max=$（'.container>div'）.length；
$（'#show'）。在（'单击'，函数（）上）{
如果（索引+1>最大值）{
//无所事事
}否则{
如果（索引<最大值-1）{
索引++；
$（'.container>div:eq（'+index+'））.show（）；
}
}
});
$（'#hide'）。在（'单击'，函数（）上）{
如果（索引==-1）{
指数=0；
}
否则{
如果（$（'.container>div:eq（'+index+'））。是（':visible'））{
$（'.container>div:eq（'+index+'））.hide（）；
索引--；
}
}
});​

检查此项

var index = -1;
var max = $('.container > div').length;
$('#show').on('click', function() {
    if (index + 1 > max) {
        // Do Nothing
    } else {
        if (index < max - 1) {
            index++;
            $('.container > div:eq(' + index + ')').show();
        }


    }
});

$('#hide').on('click', function() {
    if (index == -1) {
        index = 0;
    }
    else {
        if ($('.container > div:eq(' + index + ')').is(':visible')) {
            $('.container > div:eq(' + index + ')').hide();
            index--;
        }
    }
});​

var指数=-1；
var max=$（'.container>div'）.length；
$（'#show'）。在（'单击'，函数（）上）{
如果（索引+1>最大值）{
//无所事事
}否则{
如果（索引<最大值-1）{
索引++；
$（'.container>div:eq（'+index+'））.show（）；
}
}
});
$（'#hide'）。在（'单击'，函数（）上）{
如果（索引==-1）{
指数=0；
}
否则{
如果（$（'.container>div:eq（'+index+'））。是（':visible'））{
$（'.container>div:eq（'+index+'））.hide（）；
索引--；
}
}
});​

---

你能为完全取决于你的文档结构的场景创建一个提琴吗？这里是提琴，那么问题又是什么呢？你能为完全取决于你的文档结构的场景创建一个提琴吗，那么问题又是什么呢？我建议jQuery使用

.first（）

和

.last（）

而不是使用

[]

来引用元素？我建议jQuery使用

.first（）

和

.last（）

来引用元素？太棒了！只有一个问题。。按钮与联系人表单中的发送按钮交互，@MaggyTanky-对不起，我不知道你的意思：页面的另一端