追加和删除点击时的 Jquery 长度

Question

我需要使用 jQuery 获取 div 数量的长度。

我可以得到它，但在两个单击事件中声明变量，但这似乎是错误的，然后我还需要使用它来根据数字显示隐藏按钮。我觉得我不必将代码加倍。

在这里摆弄

https://jsfiddle.net/4Lqsf45a/51/

$("button#add").click(function(e) {
  e.preventDefault();
  $(document.body).append($("<div>"));

 var n = $("div").length;
  $("span").text("There are " + n + " divs.");
  if (n < 2) {
    $('#showhide').hide()
  } else {
    $('#showhide').show()
  }


});

$("body").on("click", "div", function(e) {
  e.preventDefault();
  $(this).closest("div").remove();

  var n = $("div").length;
  $("span").text("There are " + n + " divs.");
  if (n < 2) {
    $('#showhide').hide()
  } else {
    $('#showhide').show()
  }

});

Answer 1

为了保持这种干燥，您可以将通用逻辑提取到其自己的函数中并在需要时调用它:

$("button#add").click(function(e) {
  e.preventDefault();
  $('body').append('<div>');
  countDivs();
});

$("body").on("click", "div", function() {
  $(this).closest("div").remove();
  countDivs();
});

function countDivs() {
  var n = $("div").length;
  $("span").text("There are " + n + " divs.");
  $('#showhide').toggle(n >= 2);
}

div {
  width: 50px;
  height: 30px;
  margin: 5px;
  float: left;
  background-color: green;
}

span {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>
<div></div>
<div></div>
<div></div>

<button id="add">
  add
</button>

<p>
  <button id="showhide">
    show / hide
  </button>
</p>

请注意，我删除了 div 点击处理程序上的 preventDefault()，因为它不是必需的。可以说，button 点击处理程序也不需要它 - 假设按钮的生产版本不包含在表单中，如您的示例所示。