使用 jQuery 的购物清单

Question

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

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

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

Answer 1

删除项目后，您可以检查是否还有其他项目，如果没有则隐藏信息文本。

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

    // Check if any items remain, remove the text if there arent
    if ($("li").length == 0) {
      $(".info").html("").removeClass("remove");
    }
  });
});

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>

Answer 2

您可以使用 length 检查列表中是否还有任何 li，请参阅下面的片段

至于你说的第二个（和第一个一样加第二个功能）我不是很懂。请在此评论

$(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>

使用 jQuery 的购物清单

A shopping list using jQuery

javascript

jquery

conditional

function

list