0

在我的页面上，我使用 jquery 对我的服务器进行了多次调用。我想显示一个结果 div，其中将显示有关成功/失败的信息，例如带有成功信息的绿色 div 和带有失败信息的红色 div。这个 div 应该会看到 1-2 秒并自动消失。为此，我创建了一个 viewModel：

public class ResultMessageViewModel
{
  public ResultMessageKind KindOfMessage {get;set;}
  public string Content {get;set;}
}

在我的控制器操作中，我返回 PartialView 如下：

return PartialView("ResultMessagePartial", new ResultMessageViewModel() { KindOfMessage= ResultMessageKind.Success", Content="Operation finished successfully"});

我的 ajax 调用是这样的：

$(function () {
            $(document).on("click", "#AnswerTheQuestion", function (e) {
                e.preventDefault();
                var answerContent = $("#AnswerContent").val();
                var messageId = $(this).parent().children("#rootMessageId:first").val();
                $.ajax({
                    url: this.href,
                    type: 'GET',
                    data: { rootMessageId: messageId, content: answerContent },
                    cache: false,
                    success: function (result) {
                        //show success result div
                    },
                    error: function () {
                        //show failure result div
                    }
                });
            });

我的问题是：我怎样才能实现我的结果 div 将在成功/错误处理程序中自动显示特定时间（如 1-2 秒）的功能？这将是对用户进程是否成功完成的某种通知。我想尽可能多地保留 DRY 原则来实现这样的功能。

4

3 回答 3

1 
    var hideSuccess = function(){ $('#success').hide() });
    var hideFailure = function(){ $('#failure').hide() });

    $(function () {
        $(document).on("click", "#AnswerTheQuestion", function (e) {
            e.preventDefault();
            var answerContent = $("#AnswerContent").val();
            var messageId = $(this).parent().children("#rootMessageId:first").val();
            $.ajax({
                url: this.href,
                type: 'GET',
                data: { rootMessageId: messageId, content: answerContent },
                cache: false,
                success: function (result) {
                    //show success result div
                    $('#success').show()
                    setTimeout(hideSuccess,3000);
                },
                error: function () {
                    //show failure result div
                    $('#failure').show()
                    setTimeout(hideFailure,3000);
                }
            });
        });
于 2013-04-15T18:49:11.560 回答
1

您可以使用setTimeout()在指定的时间后执行功能。

例子：setTimeout(function, delay);

您将调用该方法并传递结果/输出和所需的时间间隔。

success: function (result) {
    // show message for 2 seconds
    show_message(result, 2)
}

用于显示/隐藏错误的方法可能是这样的：

var show_message = function(message, interval){
    $('.message-div')
        .text(message)
        .css('display', 'block')
        .animate({
            opacity:1
        }, 200);
    setTimeout(
        $(function(){
            $('.message-div')
                .animate({
                    opacity:0
                }, 200, function(){
                    $(this).css('display','none');
                 });
        }), interval * 1000
    );
}
于 2013-04-15T18:41:57.830 回答
1

尝试这个：

success: function(result){
    ('#successmsg').css('visibility', 'visible');
    setTimeout( "jQuery('#successmsg').hide();",3000 );
}

同样对于错误：

error: function{
    ('#errormsg').css('visibility', 'visible');
    setTimeout( "jQuery('#errormsg').hide();",3000 );
}

假设成功或错误消息在一个divwith中id="successmsg"，id="errormsg"并且它们是visibility:hidden由 CSS 设置的，这将设置为visibility:visible，并在 3 秒后再次隐藏它。

于 2013-04-15T18:53:53.077 回答