如何使用单个 Snackbar 并变成多个 Snackbar

Question

我发现这个很酷 snackbar，出于学习原因，我可以在我的测试网站上使用它。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_snackbar

此 snackbar 使用 ID，因此我将不得不一遍又一遍地复制粘贴 CSS 和 javascript。如果我想在同一页上显示 4 个不同的 snackbar，那么我将不得不复制粘贴 CSS 代码 4 次……这可能很烦人。

所以这是我尝试设置 multi snackbar。您可以将我的代码复制粘贴到上方 link 以查看结果。

如您所见，效果有效但丢失了 CSS 代码。有什么想法吗？

再次：在 snackbar id 中...我只是在创建框的布局，因此我可以将 snackbar 更改为 class... 并具有唯一框的 id .

<!DOCTYPE html>
<html>
<head>
<style>
    .snackbar {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 17px;
    }

    .snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

    @-webkit-keyframes fadein {
        from {bottom: 0; opacity: 0;} 
        to {bottom: 30px; opacity: 1;}
    }

    @keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }

    @-webkit-keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

    @keyframes fadeout {
        from {bottom: 30px; opacity: 1;}
        to {bottom: 0; opacity: 0;}
    }

</style>
</head>

<body>

    <h2>Snackbar / Toast</h2>
    <p>Snackbars are often used as a tooltips/popups to show a message at the bottom of the screen.</p>
    <p>Click on the button to show the snackbar. It will disappear after 3 seconds.</p>

    <button onclick="myFunction()">Show Snackbar</button>

    <div id="myUniqueBar" class="snackbar">Some text some message..</div>

    <script>
        function myFunction() {
            var x = document.getElementById("myUniqueBar")
            x.className = "show";
            setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
        }
    </script>

</body>
</html>

Answer 1

因为您在使用代码时删除了现有的小吃店 class：

x.className = "show";

将上面的代码替换为以下代码：

x.classList.add("show");

Codepen link: https://codepen.io/anon/pen/KZRJmP

如何使用单个 Snackbar 并变成多个 Snackbar

How To Use Single Snackbar And Turn Into Multi Snackbar

html

javascript

css

toast

snackbar