Question

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

我是否必须使用条件语句或是否有任何简单的解决方案？

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

Answer 1

您可以尝试类似

的内容

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

和

$("div:visible").last().hide();

Answer 2

以下代码将显示第一个div，显示无。

    $(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();
        });
    });

Answer 3

为了便于选择，给你的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();
});

演示：http://jsfiddle.net/ua9ef/2/

:hidden selector可让你只操纵隐藏的那些，或只隐藏.not()隐藏的那些。（或者你当然可以使用:visible selector ...）

Answer 4

ID是唯一的，您不能反复使用它们，将id="hiddencontent"更改为class="hiddencontent"，然后按照以下说明。

Demo jsFiddle

$(document).ready(function() {
    var index = 0;
    $('#show').click(function () {
        $('div').eq(index).fadeIn('slow');
        if(index < $('div').length){
            index++;
        }else{
            alert('There is no more hidden content!');
        }
    });
    $('#remove').click(function(){
        $('div').eq(index -1).remove();
    });
});

jQuery的.eq()有一个zero based index。我们在click函数之外设置了一个变量，但仍然可用于click的范围，我们按顺序切换hiddencontent。点击后，它会更改0 > 1 > 2 > 3的索引，依此类推。我们检查索引是否小于匹配类hiddencontent的当前元素数，如果它通过，我们将索引迭代到下一个整数。

remove函数不需要更改迭代器，因为它只想删除最后一个索引项（据我所知，根据你的场景）。

应该这样做。

Answer 5

http://jsfiddle.net/z9s8T/

CSS

div{
    display:none;
}
div.show{
    display:block;
}

HTML

<button id="show">show</button>
<button id="hide">hide</button>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

JS

$(function(){
    $('#show').click(function(){
        $('div:not(.show):eq(0)').addClass('show');
    });
    $('#hide').click(function(){
        $('div.show:last').removeClass('show');
    }); 
});

Answer 6

这是一个简单的fiddle，使用.hidden（坏名称）类来隐藏，显示和隐藏的元素。然后我使用:hidden和:visible选择器。

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

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

Answer 7

检查

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--;
        }
    }
});

<强> Check Fiddle

显示/隐藏divs jQuery

7 个答案: