如何从带有效果的输入中追加列表项

Question

我正在编写一个代码，用于根据输入制作购物清单。所以我有一个输入字段和按钮，可以将项目添加到列表中。并且该项目在单击时应该消失。我设法让它像这样工作：

 $(document).ready(function(){
  $("#button").click(function(){
    $("ul").append("<li>" + $("#input_field_value").val());
  });
  $("ul").on("click", "li", function(e){
    $(this).remove();
  });
});

但是，我需要使新的列表项附加和删除有效果，但我无法使其工作。我了解到您不能只向 append 命令添加效果。我设法让我的代码添加具有效果的新列表项，但它不会将输入字段的值打印到新列表项。新列表项为空。当添加新项目时，整个无序列表也会再次显示效果，只有新项目应该出现效果。此外，单击删除项目不再有效。这是我试过的：

$(document).ready(function(){
  $("#button").click(function(){
    var inputvalue = $("#input_field_value").val();
    var item = $("<li>" + inputvalue);
    $("ul").append(item).hide().fadeIn(1000);
  });
  $("ul").on("click", "li", function(e){
    $(this).remove().hide().fadeOut(1000);
  });
});

我也尝试了一些其他的东西，比如摆弄 appenTo 但无法让它工作。

对于更有经验的编码员来说，这可能是显而易见的，但我就是想不通:)

感谢您的帮助

Answer 1

在应用效果 fadeOut() 之前你是 hiding/removing。
您在应用效果之前添加 fadeIn()。
使用 fadeOut 的回调在效果结束前移除元素。

$(document).ready(function() {
  $("#button").click(function() {
    var inputvalue = $("#input_field_value").val();
    var item = $("<li>" + inputvalue + '</li>');
    item.hide();
    $("ul").append(item);
    item.fadeIn(1000);
  });
  $("ul").on("click", "li", function(e) {
    $(this).fadeOut(1000, function() {
      $(this).remove();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='input_field_value'>
<p/>
<button id='button'>Click me!</button>
<ul>
</ul>

如何从带有效果的输入中追加列表项

How can I append list items from input with effects

javascript

jquery

append

effects

listitem