javascript - 使用jQuery的购物 list

我试图用两个按钮创建一个购物清单：一个用于添加，一个用于删除列表项。单击“删除”按钮时，该段落应显示一些文本+最后删除的项目，但是在没有任何列表项时，它应停止显示文本。

我试图编写一个这样的if else语句，然后停止显示该文本，但是我不知道在哪里集成它。我也想为if $("li:last" == 0)创建第二个函数，就像第一个函数一样，但是代码似乎绑定到第一个函数。请问有关如何构建此结构的任何提示？

$(document).ready(function() {
  $("#addBtn").click(function() {
    shoppingList(addBtn);
  });
  $("#removeBtn").click(function() {
    $(".info").html($("li:last").text())
    $("li:last").remove();
    $(".info").addClass("remove");
    $(".info").removeClass("correct");
    $(".info").removeClass("error");
  });
});

function shoppingList(addBtn) {
  var writtenItem = $("#writtenItem").val();
  var info = $(".info");
  if (writtenItem == 0) {
    info.addClass("error")
    info.removeClass("correct")
    info.removeClass("remove")
    info.html("")
  } else {
    $("ul").append("<li>" + writtenItem + "</li>")
    $("ul li").addClass("list-item");
    info.html(writtenItem + ' <i class="fa fa-check" aria-hidden="true"></i>');
    info.removeClass("error");
    info.removeClass("remove")
    info.addClass("correct");
  }
}

.error {
  color: red;
  font-weight: bold;
}

.error:after {
  content: "You have to actually type something before adding it to the list."
}

.correct {
  color: blue;
  font-weight: bold;
}

.correct:before {
  content: "Added new list item: "
}

.remove {
  color: green;
  font-weight: bold;
}

.remove:before {
  content: "Removed last list item: "
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="writtenItem" placeholder="Write something here" value="">
<input type="button" id="addBtn" value="Add to list">
<input type="button" id="removeBtn" value="Remove last item">
<ul>
  <li class="list-item">Apples</li>
  <li class="list-item">Oranges</li>
  <li class="list-item">Lemons</li>
</ul>
<p class="info"></p>

以后编辑（我想要得到的）：

$(document).ready(function() {
$("#addBtn").click(function() {
shoppingList(addBtn);
});
$("#removeBtn").click(function() {
shoppingList(removeBtn);
  });
});

最佳答案

您可以使用li检查列表中是否还有length，请参见下面的代码段

至于你说的第二件事（像第一个一样添加第二个功能），我不太了解。请对此发表评论

$(document).ready(function() {
  $("#addBtn").click(function() {
    shoppingList(addBtn);
  });
  $("#removeBtn").click(function() {
      removeList(removeBtn);
  });
 function removeList(removeBtn) {

    if ($("li").length > 0) {
      $(".info").html($("li:last").text())
      $("li:last").remove();
      $(".info").addClass("remove");
      $(".info").removeClass("correct");
      $(".info").removeClass("error");
    } else {
      $(".info").removeClass("remove").html("");
    }


}

function shoppingList(addBtn) {
  var writtenItem = $("#writtenItem").val();
  var info = $(".info");
  if (writtenItem == 0) {
    info.addClass("error")
    info.removeClass("correct")
    info.removeClass("remove")
    info.html("")
  } else {
    $("ul").append("<li>" + writtenItem + "</li>")
    $("ul li").addClass("list-item");
    info.html(writtenItem + ' <i class="fa fa-check" aria-hidden="true"></i>');
    info.removeClass("error");
    info.removeClass("remove")
    info.addClass("correct");
  }
}
});

.error {
  color: red;
  font-weight: bold;
}

.error:after {
  content: "You have to actually type something before adding it to the list."
}

.correct {
  color: blue;
  font-weight: bold;
}

.correct:before {
  content: "Added new list item: "
}

.remove {
  color: green;
  font-weight: bold;
}

.remove:before {
  content: "Removed last list item: "
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="writtenItem" placeholder="Write something here" value="">
<input type="button" id="addBtn" value="Add to list">
<input type="button" id="removeBtn" value="Remove last item">
<ul>
  <li class="list-item">Apples</li>
  <li class="list-item">Oranges</li>
  <li class="list-item">Lemons</li>
</ul>
<p class="info"></p>