Question

我有一个表单，其中JQuery根据不同字段的要求触发错误消息。我希望根据需要在每个字段旁边弹出消息，我希望每个消息都淡入，有3秒超时，然后淡出。

但我想知道：有没有一个对象或数组存储所有超时？基本上，所有错误当前都运行与超时相同的引用。因此，如果一个输入发出错误，而另一个输入发出1秒后，则第二个消息在两秒钟内消失（而不是3秒），因为它全部指的是一个超时变量，第一个触发设置初始定时器。

这是针对订单表单的，因此Product引用了触发错误的输入的父Div 'product'。

我有这样的事情：

function error_check_number(input)
{
    var intRegex = /^\d+$/;
    var product = jQuery(input).closest('div.product');
    if (!intRegex.test(input.val()) && input.val() != '')
    {
        input.val('0');
        if (jQuery('div.error-message', product).length <= 0)
        {
            var error = jQuery("<div class='error-message'>Number Values Only</div>").hide();
            error.appendTo(jQuery(product)).slideDown("fast");
        }

        var thetime = setTimeout(function(){
            jQuery("div.error-message", product).slideUp("fast", function () {
                jQuery("div.error-message").remove();
        });
        }, 3000);       
    }
    else
    {
        clearTimeout(thetime);
        jQuery("div.error-message", product).slideUp("fast", function () {
            jQuery("div.error-message", product).remove();
        });
    }
}

我希望每次调用错误消息，就超时而言，彼此独立运行。

Answer 1

试试这个

if (!intRegex.test(input.val()) && input.val() != '')
{
    input.val('0');
    if (jQuery('div.error-message', product).length <= 0)
    {
        var error = jQuery("<div class='error-message'>Number Values Only</div>");
        error.appendTo(jQuery(product)).slideDown("fast", function(){
            var timeout=setTimeout(function(){ 
                error.slideUp("fast", function () {
                    error.remove();
                });
            }, 3000);
        });
    }
}

我认为如果没有视觉例子，我就无法继续前进。

Answer 2

这是我的，未经测试，但我认为它会起作用

function error_check_number(input) {
    var intRegex = /^\d+$/;
    var product = jQuery(input).closest('div.product');
    var error_div = product.find('div.error-message');

    function displayError(msg, field_name) {
       var error = $('<div class="error" id="error_for_'+field_name+'">'+msg+'</div>').hide();
       error.appendTo(error_div).slideDown("fast");

       error[0].timer = setTimeout(function(){
              error.slideUp("fast", function () {
                 error.remove();
              });
      }, 3000);       
    }

    if (!intRegex.test(input.val()) && input.val() != '') {
        input.val('0');
        displayError("Number Values Only");
    } else {
        err = error_div.find("#error_for_"+input.attr('name'));
        if (err[0]) {
           clearTimeout(err[0].timer)
           err.remove();
        }
    }
}

这假定div.error-message始终存在。它充当所有错误消息的容器。它不会删除容器。如果您不喜欢这种行为，只需将其附加到“div.product”

即可

Answer 3

我只是尝试使用doTimeout（），它似乎运行良好。我不应该使用这个的原因吗？

benalman.com/projects/jquery-dotimeout-plugin

function error_check_number(input)
{
    var intRegex = /^\d+$/;
    var product = jQuery(input).closest('div.product');
    if (!intRegex.test(input.val()) && input.val() != '')
    {
        input.val('0');
        if (jQuery('div.error-message', product).length <= 0)
        {
            var error = jQuery("<div class='error-message'>Number Values Only</div>").hide();
            error.appendTo(jQuery(product)).slideDown("fast");
        }
        jQuery.doTimeout(jQuery(input).attr('name'), 3000, function(){
            jQuery("div.error-message", product).slideUp("fast", function () {
                jQuery("div.error-message", product).remove();
        });
        }, true);

    }
    else
    {
        jQuery.doTimeout(jQuery(input).attr('name'), function(){
            jQuery("div.error-message", product).slideUp("fast", function () {
                jQuery("div.error-message", product).remove();
        });
        }, false);
    }
}

JQuery - 多次超时

3 个答案: