Question

嗨，伙计们，

我想要做的是显示动画gif，而有人用文本字段在文本字段中输入文字，一旦他们完成输入，gif就会消失并显示消息'已保存'几秒钟，然后会消失。

到目前为止我所做的是：

if ($('.gallery_items li input').length > 0) {
    $('.gallery_items li input').keyup(function() {         
        var li = $(this).parent();
        li.children('.gallery_saving').removeClass('dn');
        var identity = li.attr('id').split('_');
        var v = $(this).val();
        var url = '/caption/id/' + identity[1];
        $.post(url, { caption : v });   
        $.delay(500).li.children('.gallery_saving').delay(500).html('Saved...').delay(500).addClass('dn');          
        return false;
    });
}

其中类'gallery_saving'将动画gif指定为背景图像，而类'dn'只有css'display：none'。最初'gallery_saving'也有类'dn' - 所以它是不可见的，当有人开始输入类'dn'被删除 - 显示加载器。

你显然已经看到了问题：

$.delay(500).li.children('.gallery_saving').delay(500).html('Saved...').delay(500).addClass('dn');

我知道这是错的，但无法弄明白该怎么做 - 任何人都可以帮忙吗？

Answer 1

您应该在延迟时间内删除加载程序，但是在成功保存输入的数据后才能删除..

像

这样的东西

url = "/echo/html";
v = "test";
$.ajax({
  url: url,
  type: 'POST',
  data: ({ caption: v}),
  success: function(){
    $('.gallery_saving').html('Saved...').delay(1000).fadeToggle("slow");
  },
  error:  function() {
    $('.gallery_saving').html('Error...').delay(1000).fadeToggle("slow");
  }
});

示例：http://fiddle.jshell.net/gabel/udvbx/

阅读http://api.jquery.com/jQuery.ajax/了解详情...

Answer 2

尝试这样做并不是一个特别好的主意，因为如果用户实际上没有完成输入，你最终会进行大量的ajax调用。如果用户输入速度慢，您将无缘无故地保存数据。

您也可以使用show()和hide()代替dn类。或者使用toggleClass()

jQuery延迟和keyup

2 个答案: