1
두 개의 버튼이있는 쇼핑 목록을 만들려고합니다. 하나는 추가 용이고 하나는 목록 항목 제거 용입니다. 제거 단추를 클릭하면 단락에 일부 텍스트 + 마지막으로 제거 된 항목이 표시되지만 목록 항목이 없을 때 텍스트 표시가 중지됩니다.jQuery를 사용하는 쇼핑 목록
if $("li:last" == 0)과 같은 if 문을 쓰려고 시도했지만 텍스트 표시가 중단되었지만 어디에서 통합 할 것인지 잘 모릅니다. 또한 첫 번째처럼 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);
});
});
감사합니다이 여기에 대해 의견을주세요! 이제 잘 작동합니다. 두 번째 기능과 관련하여 첫 번째 기능처럼 보이게하려고 노력했습니다. 내 뜻을 이해하는 것이 어렵다는 것을 알고 있습니다. 나는 내 질문을 편집 할 것이다. – spr1x
@ spr1x 내 대답을 편집했습니다. 이것이 당신이 할 수있는 최선의 방법입니다. 'removeBtn' 함수로'shoppingList' 함수를 호출 할 수없고 다르게 작동 할 것을 기대할 수 없습니다. 'shoppingList' 함수는 ADD 버튼이하는 일을하는 코드를 내부에 가지고 있습니다. 따라서 'removeBtn'으로 호출하면,'removeBtn'은 추가 버튼과 똑같이 작동합니다. 어느 쪽이 원하지 않는지. 그래서이 두 번째 함수가 필요합니다 ... 내 대답은 –
입니다. 지금 논리를 이해하고 바보 같지만 쇼핑 목록 (addBtn)과 쇼핑 목록 (removeBtn)은 서로 다른 두 가지 기능을합니다. 나는이 실수를 결코 다시하지 않을 것이다. Mihai, 다시 한번 감사드립니다. – spr1x