Question

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

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

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

所以这是我尝试设置多个snackbar。您可以复制粘贴上面链接中的代码以查看结果。

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

再次

：在snackbar ID中...我只是创建了框的布局，因此我可以将snackbar更改为类...并为唯一框设置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

因为您在使用代码时删除现有的snackbar类：

x.className = "show";

而是用以下代码替换上面的代码：

x.classList.add("show");

Codepen链接： https://codepen.io/anon/pen/KZRJmP

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

1 个答案: