0

嗨，大家好，

我要做的是在有人使用 keyup 在文本字段中输入文本时显示动画 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');

我知道这是错误的，但不知道该怎么做——谁能帮忙？

4

2 回答 2

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/了解详情...

于 2011-04-19T09:41:20.007 回答
1

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

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

于 2011-04-19T09:42:12.197 回答