JS append增加

Question

点击一个增加按钮，每次新增一个div,上限为5个，当div个数达到第4个时，点击增加按钮，新增第五个div,同时增加按钮disabled，被禁用。html代码如下：   <div id="div_add"></div>   <input type="button" id="btn1" value="增加"/>JS代码如下：我是依据div的个数来判断的，我的代码问题是生成了第5个div，再次点击增加按钮，这时按钮才被禁用。 $(function () {    var addHTML = '<div class="div_list"></div>';    $("#div_add").append(addHTML);    $("#btn1").click(function () {        var aa = $(".div_list").length;        console.log(aa);        if (aa < 5) {            $("#div_add").append(addHTML);        } else if (aa > 5) {            $("#btn1").attr("disabled", "disabled");            return true;        }    });})JS初学者，请大神指点下

Answer 1

简单写了一下，凑合看

css：

#div_add{

      border: 1px solid #000;

      width: 500px;

    }

    .div_list{

      width: 200px;

      height: 20px;

      background-color: greenyellow;

      border: 1px solid #ccc;

    }

html

<input type="button" id="btn1" value="增加"/>

<input type="button" id="btn2" value="清空"/>

<div id="div_add"></div>

js：

<script src="../jquery.min.js"></script>

var addHTML = '<div class="div_list"></div>';

  //$('#div_add').append(addHTML);

  var time = 0;

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

    time++;

    if(time < 6){

      $('#div_add').append(addHTML);

    }

    if(time === 5){

      $(this).attr("disabled", "disabled");

    }

  });

  $('#btn2').click(function (e) {

    $('#div_add').empty();

    $('#btn1').removeAttr('disabled');

    time = 0;

  })