Question

我在一个div容器中有几个段落：

<div id="divNumbers">
    <p>One</p> <p>Two</p> <p>Three</p><p>Four</p> <p>Five</p>
</div>

单击按钮后，我使用jQuery在每个段落中添加数字：

$("#btnNumberPs").click(function () {
    for (i = 0; i < 5; i++) {
        $("#divNumbers p").eq(i).prepend((i + 1) + ". ");
    }
});

这很好。但是，在第二次单击该按钮时，我想首先将其重置，以避免对段落进行重复编号。我试图使用reset()方法，但是它不起作用。您能帮我个忙还是让我知道该怎么办？

Answer 1

在每个内部段落中添加数字就像使其成为一个有序列表一样，因此我将在单击按钮时将<div>元素实际替换为<ol>元素，然后将其替换为{ {1}}，等等。这需要更多代码，但比仅仅加数字要灵活得多，而且感觉更正确。

<div>

$("#btnNumberPs").click(function () {
  var oContainer = $("#divNumbers");
  var items;
  if (oContainer.length == 0) {
    oContainer = $("#listNumbers");
    items = oContainer.find("li");
    var oDiv = $("<div></div>").attr("id", "divNumbers");
    items.each(function() {
      var contents = $(this).html();
      var item = $("<p></p>");
      item.html(contents);
      oDiv.append(item);
    });
    oContainer.replaceWith(oDiv);
  } else {
    items = oContainer.find("p");
    var oList = $("<ol></ol>").attr("id", "listNumbers");
    items.each(function() {
      var contents = $(this).html();
      var item = $("<li></li>");
      item.html(contents);
      oList.append(item);
    });
    oContainer.replaceWith(oList);
  }
});

Answer 2

使用substring重置您的文本。您还可以使用disabled属性作为按钮，以防止添加如下所示的多朋友号码。

$("#btnNumberPs").click(function() {
  for (i = 0; i < 5; i++) {
    $("#divNumbers p").eq(i).prepend((i + 1) + ". ");
  }
  $(this).prop("disabled", true);
  $("#reset").prop("disabled", false);;
});
$("#reset").click(function() {
  for (i = 0; i < 5; i++) {
    $("#divNumbers p").eq(i).text($("#divNumbers p").eq(i).text().substring(2));
  }
  $('#btnNumberPs').prop("disabled", false);
  $("#reset").prop("disabled", true);;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divNumbers">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
</div>

<button id='btnNumberPs' type="button">Num!</button>
<button id='reset' type="button">Reset!</button>

如何重置使用jQuery完成的段落编号？

2 个答案: