bootstrap 5 toast 显示列表中的特定 toast

Question

我一直在使用 bootstrap 中的 toast，当你只使用一个 toast 来显示时，它工作得非常好。但是，每当我想显示许多预置 toast 列表中的特定 toast（例如错误 toast）时，所有其他 toast 也会显示。我想在给定时间仅显示一个 Toast，例如成功、错误或警告等。 我尝试过以下操作，但没有按预期工作。

$('.toast-error').show();// displays all toast which are defined, but not particular
$('.toast-error').toast('show');// displays all toast which are defined.

以下是我添加了预定义的所有 toast 的 html

<div aria-live="polite" aria-atomic="true" style="position: relative;z-index: 999999">
  <div style="position: absolute; top: 0; right: 0;" class=" p-1" id="toast-content">
    
    <div class="toast bg-success toast-success text-white mt-2" role="alert" aria-live="assertive" aria-atomic="true"  data-bs-animation="true">
      <div class="toast-body">
        Welcome To Project.
        <button type="button" class="pull-right btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>

    <div class="toast toast-error bg-danger text-white mt-2" role="alert" aria-live="assertive" aria-atomic="true"  data-bs-animation="true" style="display: none;">
      <div class="toast-body">
        Error Occured. Please Refresh Window.
        <button type="button" class="pull-right btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>

  </div>
</div>

<button class="w-100 btn btn-lg submit" type="button" onclick="validator()">Proceed</button>
<script>
 function validator(){
    $('.toast-error').show();
 }
</script>

我有什么地方做错了吗？

Answer 1

你可以尝试遵循它可能对你有帮助。

<script type="text/javascript">
  function validator(){
 
   var inputEmail    = $('#inputEmail').val();
   var inputPassword = $('#inputPassword').val();

    if(inputEmail.trim()==''){
     $('#toast-error').show();
     $('#toast-error').toggleClass('show');
     $('#inputEmail').focus();
     return false;
  }
  if(inputPassword.trim()==''){
     $('#toast-error').show();
     $('#toast-error').toggleClass('show');
     $('#inputPassword').focus();
     return false;
  }
 }
 </script>

Answer 2

导致解决方案的评论：

您使用的类选择器没有进一步的规范，这 将触发具有该类的所有元素。你需要缩小范围 你的 JS 逻辑。您对此有多种选择，id、自定义 属性、使用 find() 或“this”等进行块选择等

后来通过使用

IDs

（而不是

class

）作为选择器解决了该问题。

分别参考问题中的评论。

Answer 3

即使现在已经三年了，并且问题中使用了 BS4，有人也会像我一样在这里被绊倒：

当您有一个 Toast 列表（初始化说明此处）时，您仍然可以初始化单个 Toast 并单独使用它们。

let toast = new bootstrap.Toast(document.getElementById('toastID'))
toast.show();

Bootstrap 文档引用了 getOrCreateInstance 函数，该函数在这种情况下似乎不起作用。

这大多来得太晚了，但也许有人能从中得到一些帮助。