0

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

但我想知道：有没有办法让一个对象或数组存储所有超时？基本上，所有错误当前都在对超时的相同引用中运行。因此，如果一个输入触发错误，而另一个输入在 1 秒后触发错误，则第二条消息会在 2 秒（而不是 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();
        });
    }
}

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

4

3 回答 3

0

试试这个

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);
        });
    }
}

我认为如果没有视觉示例，我将无法走得更远。

于 2012-07-05T20:11:19.493 回答
0

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

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”

于 2012-07-05T20:23:02.217 回答
0

我刚刚用 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);
    }
}
于 2012-07-05T20:40:27.417 回答