javascript - 如何从输入中 append 带有效果的列表项

Question

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

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

但是，我需要使新的列表项 append 和删除具有效果，但我无法使其工作。我了解到您不能只为 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() 之前隐藏/删除。
• 您要在应用效果 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>