1
2つのボタンを持つショッピングリストを作成しようとしています。追加するものとリスト項目を削除するものです。削除ボタンをクリックすると、段落にはテキスト+最後に削除された項目が表示されますが、リスト項目が残っていない場合はテキストの表示を停止する必要があります。jQueryを使用したショッピングリスト
if $("li:last" == 0)のようなif elseステートメントを作成しようとしましたが、テキストの表示を停止しましたが、どこに統合するのかわかりません。また、最初のようにremoveBtnの2番目の関数を作成したいと思いますが、コードが最初の関数にバインドされているようです。これをどのように構造化するかについてのヒントをお願いします。
$(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);
});
});
についてはこちらをコメントしてください！今はうまく動作します。第二の機能に関して、私は最初の機能のように見せようとしていました。私が意味することを理解することは難しいです。私は私の質問を編集します。 – spr1x
@ spr1x私は私の答えを編集しました。これはあなたができる最高です。 'shoppingList'関数を' removeBtn'で呼び出すことはできず、それが異なって動作することを期待することはできません。あなたの 'shoppingList'関数には、ADDボタンが何をするのかを示すコードがあります。だからあなたが 'removeBtn'でそれを呼び出すと、' removeBtn'は追加ボタンのように動作します。あなたは望みません。だから、これのための2番目の関数が必要です...私の答えのように –
私は今、論理を理解し、それは愚かな音だが、私は買い物リスト（addBtn）とshoppingList（removeBtn）は2つの異なる機能です。私はこの間違いをもう一度するつもりはない。もう一度ありがとう、Mihai。 – spr1x