如何隐藏追加的最后一个框？ [英] How do I hide the last box on append?

问题描述

HTML：

 < 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 =countvalue = 0>< / input> 
  

CSS：

  .box {
 width：100px; 
 height：100px; 
背景颜色：＃333333; 
 margin：5px; 
 display：inline-block; 
职位：亲属; 
} 
 #boxWrap {
 width：100％; 
 overflow-y：visible; 
 height：20px; 
 
} 
 #innerWrap {
 white-space：nowrap; 
 overflow-x：hidden; 
最大宽度：100％; 
} 
  

Jquery：

<$点击（功能（）{

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个盒子可以放入，
点击附加
第4盒子隐藏
5盒子取出它的位置
点击追加
第5盒子隐藏
第6个盒子取代它

原因是它们最终会存储数据，而且我希望能够在用户关闭时做相反的处理。我的麻烦是试图获取框的索引。

谢谢！

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

谢谢Jason P

目的，回答：

pre $ $ $ $ $'''btn1'。click（function（）{

var count = parseInt（$（'＃count'）。val（），10）;
count = count + 1;
var html ='< div class =boxid =' + count +'>< / div>';
$ inWrap = $（'＃innerWrap'）;
$ inWrap.prepend（html）;
$ lastBox = $ inWrap。 find（'.box'）;



$（'＃count'）。val（count.toString（））;
var limit = $ inWrap如果（110 * count> = $ inWrap.width（））{
$（'＃innerWrap .box：visible'）。last（）。hide（） ;
}

}）;
$（'＃btn2'）。click（function（）{//要隐藏最后一个是第一个，所以它是第一个显示：none

var count = parseInt（$（'＃count'）。val（），10） - 1;
$（'＃count'）。val（count.toString（））;
$（'＃innerWrap。 （）;
var limit = $ inWrap.width（）/ 110;

if（count> limit）
$ （'#innerWrap .box：hidden'）。first（）。show（）;
}）;

解决方案

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

  $（'＃innerWrap .box：visible'）。last（）; 
  

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

});

I want the last box displayed that can fit on the page to display: none when another is appended. Example: 4 boxes can fit, click append 4th box hides 5 box takes its place click append 5th box hides 6th box takes its place

The reason for this is they will eventually store data, and I want to be able to do the reverse when they are closed by the user. My trouble is trying to get the index of the boxes.

Thank you!

EDIT *****************

Thankyou Jason P

For those who have similar aims, answer:

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

解决方案

You should be able to find the last visible box like this:

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

这篇关于如何隐藏追加的最后一个框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！