自动添加新的号码页面

Question

$('button').click(function(){ 
 
    $('.content').append('<div class="Box"></div>') 
 
});

.wrap 
 
{ 
 
    position:relative; 
 
} 
 

 
.content 
 
{ 
 
    width:200px; 
 
    height:330px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    
 
} 
 
.Box 
 
{ 
 
    width:180px; 
 
    height:50px; 
 
    background-color:grey; 
 
    position:relative; 
 
    left:50%; 
 
    margin-left:-90px; 
 
    margin-top:5px; 
 
    top:5px; 
 
} 
 
.numberPage 
 
{ 
 
    width:20px; 
 
    height:20px; 
 
    border:1px solid #666; 
 
    position:relative; 
 
    top:-30px; 
 
    left:170px; 
 
} 
 
.numberPage span 
 
{ 
 
    margin-left:5px; 
 
    margin-top:3px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="content"> 
 
    <div class="Box"> 
 
    </div> 
 
    </div> 
 
<div class="numberPage"> 
 
    <span>1</span> 
 
</div> 
 
</div> 
 

 
<button>Add new box</button>

你好，

我对JavaScript的，我认为一个问题。如何在<中添加5个框后自动添加新号码页。像1 2 3 ... 10。我认为它应该在第五个灰色框之后创建新的当前页码，但是我不知道我该怎么做。 我会很感激的任何建议

Answer 1

$('button').click(function(){ 
 
//chek if content height is biger than the sum of box heiht inclding the nmpage height and magin 
 
    if($('.content').height()>(($('.Box').height()+10)*($('.Box').length+1))){ 
 
    $('.content').append('<div class="Box"></div>'); 
 
    }else{ 
 
    var currentPage=parseInt($('.numberPage .active').html()); 
 
    PagesFiled[currentPage]=true; 
 
    currentPage++; 
 
    $('.numberPage .active').removeClass('active'); 
 
$('.numberPage').append('<span class="active">'+currentPage+'</span>'); 
 
    //clear boxes and add in next page 
 
    $('.content').empty(); 
 
    $('.content').append('<div class="Box"></div>'); 
 
    } 
 
}); 
 

 
var PagesFiled={};

.wrap 
 
{ 
 
    position:relative; 
 
} 
 

 
.content 
 
{ 
 
    width:200px; 
 
    height:330px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    
 
} 
 
.Box 
 
{ 
 
    width:180px; 
 
    height:50px; 
 
    background-color:grey; 
 
    position:relative; 
 
    left:50%; 
 
    margin-left:-90px; 
 
    margin-top:5px; 
 
    top:5px; 
 
} 
 
.numberPage 
 
{ 
 
    display:flex; 
 
    width:20px; 
 
    height:20px; 
 
    
 
    position:relative; 
 
    top:-30px; 
 
    right: -7px; 
 
} 
 
.numberPage span 
 
{ 
 
    margin-left:5px; 
 
    margin-top:3px; 
 
    } 
 
.numberPage .active{ 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="content"> 
 
    <div class="Box"> 
 
    </div> 
 
    </div> 
 
<div class="numberPage"> 
 
    <span class='active'>1</span> 
 
</div> 
 
</div> 
 

 
<button>Add new box</button>

Answer 2

您可以使用下面的代码为这个

$('button').click(function(){ 
    $('.content').append('<div class="Box"></div>') 
    $('.numberPage').append('<span>'+($('.numberPage span').length + 1)+'</span>') 
}); 

Answer 3

试试这个。

$('button').click(function(){ 
 
    if ($('.content .Box').length == 5) { 
 
     $('.content .Box').remove(); 
 
     var number = parseInt($('.numberPage span').text()) + 1; 
 
     $('.numberPage span').html(number); 
 
    } 
 
    $('.content').append('<div class="Box"></div>') 
 
});

.wrap 
 
{ 
 
    position:relative; 
 
} 
 

 
.content 
 
{ 
 
    width:200px; 
 
    height:330px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    
 
} 
 
.Box 
 
{ 
 
    width:180px; 
 
    height:50px; 
 
    background-color:grey; 
 
    position:relative; 
 
    left:50%; 
 
    margin-left:-90px; 
 
    margin-top:5px; 
 
    top:5px; 
 
} 
 
.numberPage 
 
{ 
 
    width:20px; 
 
    height:20px; 
 
    border:1px solid #666; 
 
    position:relative; 
 
    top:-30px; 
 
    left:170px; 
 
} 
 
.numberPage span 
 
{ 
 
    margin-left:5px; 
 
    margin-top:3px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="content"> 
 
    <div class="Box"> 
 
    </div> 
 
    </div> 
 
<div class="numberPage"> 
 
    <span>1</span> 
 
</div> 
 
</div> 
 

 
<button>Add new box</button>

Answer 4

尝试这种解决方案

t = 0; 
 
$('button').click(function(){ 
 
    $('.content').append('<div class="Box"></div>'); 
 
    t++; 
 
    if (t%5 === 0) { 
 
    $('.wrap').append('<div class="numberPage"><span>'+t+'</span></div>'); 
 
    
 
    } 
 
});

.wrap 
 
{ 
 
    position:relative; 
 
} 
 

 
.content 
 
{ 
 
    width:200px; 
 
    height:330px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    
 
} 
 
.Box 
 
{ 
 
    width:180px; 
 
    height:50px; 
 
    background-color:grey; 
 
    position:relative; 
 
    left:50%; 
 
    margin-left:-90px; 
 
    margin-top:5px; 
 
    top:5px; 
 
} 
 
.numberPage 
 
{ 
 
    width:20px; 
 
    height:20px; 
 
    border:1px solid #666; 
 
    position:relative; 
 
    top:-30px; 
 
    left:170px; 
 
} 
 
.numberPage span 
 
{ 
 
    margin-left:5px; 
 
    margin-top:3px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="content"> 
 
    <div class="Box"> 
 
    </div> 
 
    </div> 
 
<div class="numberPage"> 
 
    <span>1</span> 
 
</div> 
 
</div> 
 

 
<button>Add new box</button>

Answer 5

试试这个。添加当前页面号每点击一次按钮+1。

$('button').click(function(){ 
 
    var counter = $('.numberPage span').text(); 
 
    $('.content').append('<div class="Box"></div>'); 
 
    
 
    if($('.content .Box').length == 6){ 
 
     $('.content .Box').remove(); 
 
     counter = parseInt(counter) + 1; 
 
     $('.numberPage span').text(counter); 
 
    } 
 
    
 
});

.wrap 
 
{ 
 
    position:relative; 
 
} 
 

 
.content 
 
{ 
 
    width:200px; 
 
    height:330px; 
 
    border:1px solid #000; 
 
    position:relative; 
 
    
 
} 
 
.Box 
 
{ 
 
    width:180px; 
 
    height:50px; 
 
    background-color:grey; 
 
    position:relative; 
 
    left:50%; 
 
    margin-left:-90px; 
 
    margin-top:5px; 
 
    top:5px; 
 
} 
 
.numberPage 
 
{ 
 
    width:20px; 
 
    height:20px; 
 
    border:1px solid #666; 
 
    position:relative; 
 
    top:-30px; 
 
    left:170px; 
 
} 
 
.numberPage span 
 
{ 
 
    margin-left:5px; 
 
    margin-top:3px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="content"> 
 
    <div class="Box"> 
 
    </div> 
 
    </div> 
 
<div class="numberPage"> 
 
    <span>1</span> 
 
</div> 
 
</div> 
 

 
<button>Add new box</button>