模板文字如何制定一个“通用规则”？

Question

我是编码新手，但我在使用 css 变量的项目中使用模板文字。此示例在一个函数内一次性设置所有变量。这是指所有都有事件监听器的输入。

document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);

我想为跨度设置另一个规则来显示值。现在我正在像这样单独做每一个。

heightDisplay.innerHTML = height.value + 'px';
widthDisplay.innerHTML = width.value + 'px';

所有跨度的 ID 都将是“this.name + 'Display'” 我想纠正一条使用文字一次性设置它们的规则（类似于设置变量的规则）而不是编写 30 行代码。

我不知道在其中添加 Display 的语法，也不知道在何处放置反引号。

我认为这是可能的，因为 Javascript 中的几乎所有内容都是可能的。谢谢你的时间。

Answer 1

我假设您有一个执行此代码行的迭代：document.documentElement.style.setProperty(--${this.name}, this.value + suffix);

在此迭代中，您可以像这样设置跨度的值：

var Span = document.querySelector(`[id*= ${this.name}]`);

Span.innerHTML =  this.value+ "px";

编辑： querySelector - 函数获取 css-selector 作为参数。 [] - Brackets 是一个 css selector 获取具有属性（在本例中为 id）和值（this.name）的元素。它们之间的 *= 表示，您可以 select 一个在属性值中具有子字符串的元素。

Template Literals How To Make a ?Universal Rule?