Question

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

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

但是，我需要将新列表项追加并删除效果，我无法使其正常工作。我了解到你不能只为append -command添加效果。我设法让我的代码添加具有效果的新列表项但是它不会将输入字段的值打印到新列表项。新列表项为空。此外，整个无序列表再次显示添加新项目时的效果，只有新项目才会显示效果。此外，通过单击删除项目不再起作用。这就是我试过的：

$(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>

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

1 个答案: