Ich versuche, eine Einkaufsliste mit zwei Schaltflächen zu erstellen: eine zum Hinzufügen und eine zum Entfernen von Listenelementen. Wenn auf die Schaltfläche zum Entfernen geklickt wird, sollte der Absatz einen Text und das zuletzt entfernte Element anzeigen. Wenn keine Listenelemente mehr vorhanden sind, sollte der Text jedoch nicht mehr angezeigt werden.Eine Einkaufsliste mit jQuery
Ich habe versucht, eine eine wenn sonst Aussage wie if $("li:last" == 0) dann aufhören, den Text anzuzeigen, aber ich weiß nicht, wo es zu integrieren. Ich möchte auch eine zweite Funktion für removeBtn erstellen, genau wie die erste, aber es scheint, dass der Code an die erste Funktion bindet. Irgendwelche Tipps zur Strukturierung, bitte?
$(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>Später bearbeiten (was ich versuche zu bekommen):
$(document).ready(function() {
$("#addBtn").click(function() {
shoppingList(addBtn);
});
$("#removeBtn").click(function() {
shoppingList(removeBtn);
});
});
Thank you! Funktioniert jetzt gut. In Bezug auf die zweite Funktion habe ich versucht, es wie die erste aussehen zu lassen. Ich weiß, es ist schwer zu verstehen, was ich meine. Ich werde meine Frage bearbeiten. – spr1x
@ spr1x Ich habe meine Antwort bearbeitet. Das ist das Beste, was Sie tun können. Sie können die Funktion 'shoppingList' nicht mit' removeBtn' aufrufen und erwarten, dass sie anders funktioniert. Ihre 'shoppingList'-Funktion enthält einen Code, der die Schaltfläche ADD ausführt. Wenn Sie es also mit 'removeBtn' aufrufen, funktioniert' removeBtn' genauso wie die Schaltfläche add. Was du nicht willst. Sie brauchen also eine zweite Funktion ... wie in meiner Antwort –
Ich verstehe die Logik jetzt und es klingt albern, aber ich habe gelernt, dass ShoppingList (AddBtn) und ShoppingList (RemoveBtn) zwei verschiedene Funktionen sind. Ich werde diesen Fehler nie wieder machen. Danke nochmal, Mihai. – spr1x