Question

我在CSS中有一个叫做toast的基类，它包含了我所有的基本样式，并且有一个javascript函数，它传递了一种基于用户输入创建的toast来提供反馈。这个函数编辑我的toast类并添加一些图标和文本，如下所示：

#toast {
        visibility: hidden;
        width: 200px;
        min-height: 40px;
        max-height: 100px;
        border-radius: 5px;
        //and a whole bunch more styling
        }

然后是我的js：

function showToast(type) {
    var label = null;
    var iconElement = null;
    var i = document.getElementById("toast")

    switch (type) {
        case 'success':
            i.style.border = 'solid 1px #007700';
            label = "SUCCESS";
            iconElement = "icons/success.png";
            break;
           //and then a bunch more cases for my other types
    }

    document.getElementById("title").innerHTML = label;
    document.getElementById("icon").src = iconElement;
    i.style.visibility = 'visible';
}

目前，每当我调用我的函数来创建一个新的toast时，它都会替换旧的toast，但是我想更新它们以便它们可以堆叠并且能够一次输出多个反馈。如何创建CSS类的多个实例，以便每次调用构造函数时都不会覆盖它们？

Answer 1

您可能正在为每个元素提供ID，吐司。因此，当您运行此行（缺少分号（;））时：

var i = document.getElementById("toast")

你只是一遍又一遍地获得带有toast ID的第一个元素并替换它。

您可能想要做的是为您的Toast元素分配一个类。

它可能看起来像这样：

<div id="genericToast1" class="toast"></div>
<div id="successToast1" class="toast success"></div>
<div id="burntToast1" class="toast burnt"></div>

然后在你的CSS中，你可以使用类选择器来修改它们：

.toast 
{
    visibility: hidden;
    width: 200px;
    min-height: 40px;
    max-height: 100px;
    border-radius: 5px;
    //and a whole bunch more styling
}

.toast.success
{
//More styling for this kind of toast...
}

.toast.burnt
{
//More styling...
}

不需要JS！

我需要在js

1 个答案: