Question

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

我尝试写一个if if语句，如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

您可以使用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>

Answer 2

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

＆＃13;

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

＆＃13;

.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: "
}

＆＃13;

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

＆＃13;

使用jQuery的购物清单

2 个答案: