Question

HTML：

<button>Append</button>
<div id="boxWrap">
    <div id="innerWrap"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>
</div>
<input id="count" value=0></input>

CSS：

.box {
    width: 100px;
    height: 100px;
    background-color: #333333;
    margin: 5px;
    display: inline-block;
    position: relative;
}
#boxWrap {
    width: 100%;
     overflow-y: visible;
    height: 20px;

}
#innerWrap {
    white-space:nowrap;
    overflow-x: hidden;
    max-width: 100%;
}

Jquery的：

$('button').click(function(){

    var html = '<div class="box"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');

    var count = parseInt( $('#count').val(), 10 );
    count = count+1;
    alert(count);
    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
        $lastBox.index(count-1).css( {"display": "none" }  );
    }

});

我希望显示的最后一个框能够显示在页面上以显示：当附加另一个时，显示无。例： 4个盒子可以放，点击追加第四盒隐藏 5个盒子取而代之点击追加第五盒隐藏第六个盒子取而代之

这样做的原因是它们最终将存储数据，并且我希望能够在用户关闭数据时执行相反的操作。我的麻烦是试图获得方框的索引。

谢谢！

编辑 * ** * ** * ** * ** * ** * *

谢谢你Jason P

对于那些有类似目标的人，请回答：

$('#btn1').click(function(){

        var count = parseInt( $('#count').val(), 10 );
    count = count+1;
    var html = '<div class="box" id="' +count+ '"></div>';
    $inWrap = $('#innerWrap');
    $inWrap.prepend(html);
    $lastBox = $inWrap.find('.box');



    $('#count').val(count.toString());
    var limit = $inWrap.width() / 110;
    if( 110*count >= $inWrap.width() ) {
            $('#innerWrap .box:visible').last().hide();
        }

});
$('#btn2').click(function(){ // want the last one hidden to be first one back so it's the first one with display: none

    var count = parseInt( $('#count').val(), 10 ) - 1;
    $('#count').val(count.toString());
    $('#innerWrap .box:visible').last().hide();
    var limit = $inWrap.width() / 110;

    if(count > limit)
        $('#innerWrap .box:hidden').first().show();
    });

Answer 1

您应该能够找到最后一个可见的框：

$('#innerWrap .box:visible').last();

如何隐藏追加的最后一个方框？

1 个答案: