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

Question

我一直在使用toast from bootstrap，它工作得很好，当你只使用一个toast来显示。但是，当我想要显示许多预定义toast列表中的特定toast时，例如error 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.

下面是我添加了预先定义的所有祝酒词的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, custom属性，用find()或"this"等等。

这个问题后来通过使用IDs作为选择器而不是class来解决。

分别参考问题中的注释