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>