Найти и очистить тост (Toastr)

Question

У меня есть страница, на которой может быть динамически добавлено несколько toasts с использованием плагина https://github.com / CodeSeven / toastr.

У меня есть link (Ok) на каждом тосте, при нажатии на эту ссылку мне нужно закрыть только отдельные toast, а не все toast, которые видны.

toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear();
});

В приведенном выше коде я использовал метод toastr.clear(), который очищает все тосты.

Кто-нибудь может мне помочь, как определить toast из Ok link кликающих и убрать только этот тост?

Обновление № 1 .

Я попытался ответить на вопрос @imjosh, но $(this).closest('.toast') находит правильный тост, но toastr.clear($(this).closest('.toast')); не закрывает тост.

Если я сохраню тост object в переменной и передам toastr.clear() в качестве аргумента, это сработает. Но я не знаю, как обращаться с несколькими тостами таким образом.

var toast = toastr.warning("You are warned. <br/> <a id='close-toastr'> Ok </a>", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

$('body').on('click', 'a#close-toastr', function () 
    toastr.clear(toast);
});

Обновление № 2 .

К сожалению, я использую https://github.com/Foxandxss/angular-toastr не подключаемый модуль. тот, который я упомянул выше.

Спасибо.

javascript jquery angularjs toastr angular-toastr

1

Gokul M 8 Дек 2016 в 16:40

Answer 1

Ответ, данный @imjosh, хорошо работает в обычном плагине toastr, но не в angular-toastr плагин.

Итак, я попытался использовать метод jquery remove() вместо метода toastr.clear(), как показано ниже, и он работает хорошо.

$('body').on('click', 'a#close-toastr', function () {
    $(this).closest('.toast').remove();
});

Пожалуйста, прокомментируйте, если этот способ удаления toast вызывает какие-либо проблемы, но я не нашел никаких проблем с этим.

Наконец, спасибо @imjosh за предоставленный мне метод поиска ближайшего toast.

4

Gokul M 9 Дек 2016 в 07:47

Answer 2

toastr.options = {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
    , closeButton: true
    , closeHtml: '<button class="btn" style="background-color: grey; padding: 5px;">OK</button>'
}

toastr.warning("You are warned");
toastr.warning("You are warned 2");

https://jsfiddle.net/3ojp762a/3/

Или, чтобы сделать это так, как вы пытались, если вам это нужно по какой-то причине:

toastr.warning("You are warned. <br/> <a class='close-toastr'> Ok </a>", "", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});

toastr.warning("You are warned2. <br/> <a class='close-toastr'> Ok </a>", "", {
    tapToDismiss: false
    , timeOut: 0
    , extendedTimeOut: 0
    , allowHtml: true
    , preventDuplicates: true
    , preventOpenDuplicates: true
    , newestOnTop: true
});


$('.close-toastr').on('click', function () {
    toastr.clear($(this).closest('.toast'));
});

https://jsfiddle.net/esgrwznu/

5

imjosh 8 Дек 2016 в 17:25

Answer 3

Если кто-то хочет закрыть тостер от другого события (не просто клик)

$('.close-toastr').closest('.toast').remove();

4

Christopher Grigg 13 Сен 2017 в 16:50

Найти и очистить тост (Toastr)

3 ответа

Похожие вопросы

Новые вопросы

javascript