如何使CSS类的一部分动态化并向其发送值？

Question

我在mvc项目的Header中有一些链接，它有一个样式，通过链接显示一个图标并在其中添加vale。例如，考虑以下代码：

<span class="icon-alert-13"></span>

<a href="@Url.Action("Document","Document")" class="documents-view"><span class="icon-docs"></span>documents</a>

这就是它的样子：

我有这个与所有数字一起工作，例如，如果我改变13到18，如：icon-alert-18它在图标中显示18。

这是风格：

.icon-alert-18:before {
 content: '\0030';

}

如何将class =“icon-alert-18”的数字部分作为变量，以便我可以从代码中传递值并使用我传递的值填充图标？

这也是在移动开发中。

Answer 1

我们假设您有一个名为alertNumber的变量，它包含您要在图标中显示的数字。

您可以使用任何DOM功能获取图标：

const numbersIcon = document.getElementById("numbersIcon");

声明您始终希望元素拥有的类，例如：

const defaultNumbersIconClasses = "foo";

您可以将该变量传递给更改元素类的函数，如下所示：

function updateIconTo(number) {
    numbersIcon.className = defaultNumbersIconClasses;
    numbersIcon.classList.add("icon-alert-" + number);
}

函数内的第一行将元素的类设置为您指定的默认类。

第二个添加icon-alert-加上您的号码作为新班级。

您现在可以在任何类型的事件中使用该功能，例如onclick事件：

<span onclick="updateIconTo(alertNumber)" id="numbersIcon" class="icon-alert-13"></span>

希望有所帮助！