javascript - 我需要在 js 中创建我的 CSS 类的多个实例

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 时，它都会替换旧的，但是我想更新它们，以便它们可以堆叠并能够一次输出多个反馈。如何创建我的 CSS 类的多个实例，以便它们不会在我每次调用构造函数时被覆盖？

Answer 1

您可能正在为每个元素指定 ID，toast。因此，当您运行此行(缺少分号 (;))时:

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!