jquery 的自定義小吃店/通知無法按我的意願工作

Question

我正在嘗試制作自定義通知 / Snackbar / toast 任何你想命名的東西

我遇到的問題是，當我多次單擊按鈕時，小吃店只會更改文本，而不是像堆疊在現有文本之上那樣創建新文本

Store.Toaster = (options) => {

  const { text, type, time } = options;


  if($(".text").html() != `` && $("#toaster").is(":visible")) {
    return
  }
  $("#toaster").fadeIn("fast");

  $("#toaster .toast-container .text").html(`${text}`);

  setTimeout(() => {
    $("#toaster").fadeOut("fast");
    $("#toaster .toast-container .text").html(``);
  }, 900);

  switch (options.type) {

    default:
      $("#toaster .toast-container .type").hide()
      break

    case "success":
      $("#toaster .toast-container .icontype").html(
        `<i class="fas fa-shopping-cart"></i>`
      );

      $("#toaster .toast-container .icontype").css("color", "lightgreen");
      $("#toaster .toast-container .type").css(
        "border-bottom",
        "1px solid lightgreen"
      );

      break;

    case "info":
      $("#toaster .toast-container .icontype").html(
        `<i class="fas fa-shopping-basket"></i>`
      );
      $("#toaster .toast-container .icontype").css("color", "limegreen");

      $("#toaster .toast-container .type").css(
        "border-bottom",
        "1px solid limegreen"
      );
      break;

    case "error":
      $("#toaster .toast-container .icontype").html(
        `<i class="fa fa-times"></i>`
      );
      $("#toaster .toast-container .icontype").css("color", "lightcoral");
      $("#toaster .toast-container .type").css(
        "border-bottom",
        "1px solid lightcoral"
      );
  }
};

& CSS

#toaster {
        display: none;
        position: absolute;
        top: 88%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 320px;
        max-width: 350px;
        min-width: 320px;
        color: white;
        z-index: 1000;
        background: #4b5962c2;
        overflow: hidden;

        border-radius: 4px;

        .toast-container {
            display: flex;
            align-items: center;

            .type {
                color: lightgreen;
                background: #272f35cb;
                padding: 25px;
            }

            span[class="text"] {
                font-size: smaller;
                padding: 5px;
            }
        }
    }

      <div id="toaster">
        <div class="toast-container">
          <div class="type">
            <span class="icontype"></span>
          </div>
          <span class="text"></span>
        </div>
      </div>

正如我所說，我希望它堆疊在一起，這樣文本就不會改變，這樣你就可以在觸發新通知之前看到你做了什么

這是問題https://gyazo.com/a151f4963af7a1d790a2ebd844429c02 RN的預覽，這不是“大問題”，但我不明白如何使它與堆棧一起使用

和平

Answer 1

為了讓它們堆疊起來，你必須有多個 toast 元素，而不僅僅是一個。 您必須管理添加和刪除這些單獨的元素。 這是一個給你想法的例子。

 $(".make-toast").on('click', function() { addToast({ text: 'hello world', type: $(this).attr('data-type'), time: 3000 }) }) function addToast(option) { const id = Date.now(); option.id = id; $("#toaster").css('display', 'block'); $("#toasts").prepend(slice(option)); setTimeout(() => { removeToast(id); }, option.time) } function removeToast(id) { $(`#${id}`).slideUp('fast', remove); function remove() { $(`#${id}`).remove(); if (.$("toasts").children()) { $("toaster"),css('display'; 'none'). } } } function slice(option) { let toast = $(`<div class="type ${option.type}" id="${option.id}"><div><span class="icontype"></span></div><span class="text"></span></div>`) $(toast).find('.text').text(option;text); return toast; }

 #toaster { display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); max-width: 350px; color: white; z-index: 1000; border-radius: 4px; }.toast-container { display: flex; align-items: center; }.type { padding: 10px 25px; margin-bottom: 3px; animation: 300ms ease-in-out enter; }.type.info { color: lightgreen; background: #272f35cb; }.type.error { color: white; background: #dd1111dd; } span[class="text"] { font-size: smaller; padding: 5px; } @keyframes enter { 0% { opacity: 0; transform: translateY(100%); } 100% { opactiy: 1; transform: translateY(0); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="make-toast" data-type="info">Info Toast</button> <button class="make-toast" data-type="error">Error Toast</button> <div id="toaster"> <div class="toast-container"> <div id="toasts"></div> </div> </div>