自动添加新号码页面

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的问题。如何在＆lt; .content＆gt;中添加5个框后自动添加新的数字页面例如比如1 2 3 ... 10。我认为它应该在prpend第五个灰色框后用当前页码创建新的，但我不知道我怎么做。 我将不胜感激任何建议

Answer 1

试试这个。

＆＃13;

＆＃13;

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

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个。添加当前页面没有。点击每个按钮+ 1。

＆＃13;

＆＃13;

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

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$('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={};

＆＃13;

.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;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用以下代码

$("#createAction").click(function() {
  var targetDate = $("#targetDate").val();
  var newAction = "<div id='actionsDiv'>
                     <div>
                        <button type='button' id='delete'> delete</button>
                     </div>
                     <label>Target Date:</label>" + targetDate + "
                   </div>";
  $("#actionPlanInfo").append(newAction);

  $("#targetDate").val('');

  $("#delete").on("click", function() {
    var confirmation = confirm('Are you sure you want to delete this action plan/s?');
    if (confirmation == true) {
      $(this).parent().parent().remove();
    }
  });
});

Answer 5

试试这个解决方案

＆＃13;

＆＃13;

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

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;