jQuery toastr onHidden 函数答案

【问题标题】：Jquery toastr onHidden functionjQuery toastr onHidden 函数
【发布时间】：2014-09-12 22:01:43
【问题描述】：

我正在使用 jquery toastr。到目前为止一切都很好。我可以很好地展示和关闭祝酒词。我希望能够唯一地识别每个吐司。并在 onHidden 函数中使用该唯一标识符。有没有人这样做过？为 toastr 类或关闭的 toast 周围的 div 调用关闭事件的 jquery 是更好的选择吗？

    var mes = 'My name is Inigo Montoya.<input type="hidden" id="announcementId" value="1"/>' +
       '<input type="hidden" id="userId" value="'+ userid +'"/> ';

    var mes1 = 'Princess Bride<input type="hidden" id="announcementId2" value="2"/>'+
       '<input type="hidden" id="userId1" value="'+ userid +'"/> ';

    var mes2 = 'Man in Black<input type="hidden" id="announcementId2" value="3"/>'+
       '<input type="hidden" id="userId2" value="'+ userid +'"/> ';

   var mes3 = 'Inconcivable!<input type="hidden" id="announcementId3" value="4"/>'+
       '<input type="hidden" id="userId3" value="'+ userid +'"/> ';

toastr.options = {
  "closeButton": false,
  "debug": false,
  "positionClass": "toast-top-full-width",
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "0",
  "extendedTimeOut": "0",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};

toastr.options.onHidden = function(item) { 
//GET UNIQUE TOAST ID'S HERE
        var val = 1;//$this.find("#announcemntId").val();
        alert("CLOSED " + item); 
}

toastr.error(mes, "First Toast");
toastr.error(mes1, "Second Toast");
toastr.error(mes2, "Third Toast");
toastr.error(mes3, "Fourth Toast");

【问题讨论】：

标签： jquery toastr

【解决方案1】：

您可以传递第三个参数，即选项覆盖

toastr.error('Some error', 'Error', { onHidden: function() {
         console.log('Error toast hidden.')
}});

或修改全局onHidden

var onHiddenToast = function () { 
        console.log("onHidden");
}
toastr.options.onHidden = onHiddenToast;

你也可以简单地通过引用它来获得吐司

var myToast = toastr.info("Some info");
//do what you want with myToast

【讨论】：

感谢您的提醒！将考虑所有未来用途！

【解决方案2】：

如果以后有人遇到这个问题，这是我的解决方案。从 json 加载吐司。每个 toast 都在自己唯一的 div 中（信息、错误、警告、成功），并且每个都有一个分配给它的类。我为 toast 中的每条消息中的隐藏属性分配了我需要的值。

$.ajax({
    dataType: "json",
    url: '/announcements/getannouncements/userid/' + userid,
    success: function (data) {
        $.each(data, function (i, val) {
            var mes = '<input type="hidden" id="userId" value="' + userid + '"/>' +
                '<input type="hidden" id="announcementId" value="' + val.id + '"/>' +
                'Client:  ' + val.client + '</br>' + val.announcement;
            var title = val.title;
            toastr.error(mes, title); //info, success, warning, error
        });
    },
    error: function () {
        alert("Could not get announcments");
    }
});

由于单击 div 时会关闭 toast，因此我可以捕获单击的 div 类，找到公告和用户 ID 并执行我的逻辑

//class could be warning, error, info, success : we only use error
$(".toast-error").live('click', function () {
    var userId = $(this).find("#userId").val();
    var announcementId = $(this).find("#announcementId").val();
    var url = '/announcements/acknowledge/userid/' + userId + '/announceid/' + announcementId;
    // ajax call to the controller to write the timestamp of the user clicking the toast announcement
    $.ajax({
        dataType: "json",
        url: url,
        success: function (data) {
            if (data == '1') {
                alert("Successfully acknowledged");
            }
            else {
                alert("Data error");
            }
        },
        error: function () {
        }
    });
});

【讨论】：

【解决方案3】：

我不太明白这些答案，所以我添加了自己的答案。我使用 jquery 创建了一个 onclose 函数，（当有人单击 toast-close 按钮时）像这样 -

$('.toast-close-button').click(function() {
*someCodeHere 
});

【讨论】：