JS append增加

點(diǎn)擊一個(gè)增加按鈕，每次新增一個(gè)div,上限為5個(gè)，當(dāng)div個(gè)數(shù)達(dá)到第4個(gè)時(shí)，點(diǎn)擊增加按鈕，新增第五個(gè)div,同時(shí)增加按鈕disabled，被禁用。
html代碼如下：

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

JS代碼如下：我是依據(jù)div的個(gè)數(shù)來(lái)判斷的，我的代碼問(wèn)題是生成了第5個(gè)div，再次點(diǎn)擊增加按鈕，這時(shí)按鈕才被禁用。

 $(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初學(xué)者，請(qǐng)大神指點(diǎn)下

回答

編輯回答

尛憇藌

你把長(zhǎng)度判斷放到點(diǎn)擊外面。

2017年8月4日 03:40

編輯回答

薄荷綠

描述里面說(shuō)的: 點(diǎn)擊增加按鈕，新增第五個(gè)div,同時(shí)增加按鈕disabled;

但是代碼里面用 if-else 來(lái)判斷新增和增加disabled,不能同時(shí)，所以就有問(wèn)題了。

2017年8月31日 04:26

編輯回答

朕略萌

簡(jiǎn)單寫(xiě)了一下，湊合看

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：

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

2018年5月3日 03:21

編輯回答

遲月

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

2018年5月29日 02:12