1

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

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

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

7 回答 7

3

您可能可以尝试类似

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

和

$("div:visible").last().hide();
于 2012-10-31T20:28:20.047 回答
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();
        });
    });
于 2012-10-31T20:25:12.480 回答
2

为您的 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器允许您只操作隐藏的，或者只操作.not()隐藏的。（或者当然你可以使用:visible选择器......）

于 2012-10-31T20:30:25.340 回答
0

ID是独一无二的，您不能一遍又一遍地重复使用它们，请更改id="hiddencontent"为class="hiddencontent"然后按照以下说明进行操作。

演示 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 函数不需要更改迭代器，因为它只想删除最后一个索引项（据我所知，根据您的情况）。

这应该做。

于 2012-10-31T20:26:18.320 回答
0

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');
    }); 
});​
于 2012-10-31T20:30:37.457 回答
0

这是一个简单的小提琴.hidden，对将被隐藏、显示和再次隐藏的元素使用 (bad name) 类。然后我使用:hiddenand:visible选择器。

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

$("#remove").click(function() {
    $(".hidden:visible").last().hide();
});
于 2012-10-31T20:31:27.067 回答
0

检查这个

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

检查小提琴

于 2012-10-31T20:42:29.407 回答