javascript - notifyjs - 隐藏来自其他地方的通知

Question

我正在使用 notifyjs对于一些通知。我注意到 .notify(...) 返回一个元素，而不是我可以用来操作通知的对象。如何隐藏来自外部事件的通知，例如单击按钮？

是否有可能以某种方式将元素 ID 或类名注入(inject)通知中，以便我稍后可以使用 jQuery 选择它？现在我所看到的是:

<div class="notifyjs-wrapper">
    <div class="notifyjs-arrow" style="..."></div>
    <div class="notifyjs-container" style="...">
        <div class="notifyjs-bootstrap-base notifyjs-bootstrap-info">
            <span data-notify-text="">No Pick Tickets To Create</span>
        </div>
    </div>
</div>

没有什么具体的信息可以用来稍后识别通知。遵循 notifyjs 上的示例之一页面，我尝试:

$('#elem').notify({
    title: $('<div id="foobar"></div>').text("the message")
}, { 
    ... 
});

但这会导致通知中断。

Answer 1

有趣的问题!我认为一种简单且相对优雅的方法是立即捕获 .notifyjs-corner 元素中的第一个 child 。

看看这个例子是如何工作的:

http://jsfiddle.net/nate/TAkxV/

$('button').on('click', function () {

    // Trigger a notification
    $.notify("Hello World", {
        clickToHide: false,
        autoHide: false
    });

    // Find the container for all notifications
    var $notify = $('.notifyjs-corner');

    // Find the notification we just created and save a reference to it
    var $note = $notify.children().first();

    // Add a button linked to this notification
    $('<button>', {
        text: 'close this notification'
    }).on('click', function () {

        // trigger the custom event provided by notify
        $note.trigger('notify-hide');

        // remove this button
        $(this).remove();

    }).appendTo('body');
});

单击按钮时，我创建一个通知，然后立即在 .notifyjs-corner 中保存对第一个子项的引用。然后我创建一个带有单击绑定(bind)的按钮，只要单击该按钮，它就会触发该注释的隐藏行为。有道理吗？