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

你把长度判断放到点击外面。

Answer 2

描述里面说的: 点击增加按钮，新增第五个div,同时增加按钮disabled;

但是代码里面用 if-else 来判断 新增 和 增加disabled,不能同时，所以就有问题了。

Answer 3

简单写了一下，凑合看

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

Answer 4

$(function () {
    var addHTML = '<div class="div_list"></div>';
    $("#btn1").click(function () {
        var aa = $(".div_list").length;
        if (aa > 5) {
            return;
        } else if (aa === 5) {
            $("#btn1").attr("disabled", "disabled");
        }
        $("#div_add").append(addHTML);
    });
})