如何使用单个 Snackbar 并变成多个 Snackbar
Posted
技术标签:
【中文标题】如何使用单个 Snackbar 并变成多个 Snackbar【英文标题】：How To Use Single Snackbar And Turn Into Multi Snackbar 【发布时间】：2018-06-21 12:50:24 【问题描述】：我发现了这个很酷的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 更改为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>
【问题讨论】：
为什么需要复制粘贴 CSS？您已经在使用类... Multiple snackbars的可能重复 【参考方案1】：因为您在使用代码时正在删除现有的小吃店类：
x.className = "show";
把上面的代码替换成这个代码：
x.classList.add("show");
Codepen 链接： https://codepen.io/anon/pen/KZRJmP
【讨论】：
以上是关于如何使用单个 Snackbar 并变成多个 Snackbar的主要内容，如果未能解决你的问题，请参考以下文章