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

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

本文介绍了如何隐藏追加的最后一个框?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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 append4th box hides5 box takes its placeclick append5th box hides6th 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();

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

10-15 17:35