如何将类名用作预定义变量？

Question

如何使用DOM类名来引用预定义变量，该变量与JavaScript中的className名称相同？

例如：

<div class="someContent"></div>

//JS
var someContent = "this is a JS variable";

div = document.querySelector(".someContent");

div.innerHTML = div.className;

这将输出：

<div class="someContent">someContent</div>

但我想输出：

<div class="someContent">this is a JS variable</div>

如何使用类名链接到我的变量？是否有一种方法可以使用类名来引用变量，而不是实际的类名？

请勿使用jQuery。

这是我正在处理的fiddle http://jsfiddle.net/f6WpJ/

- user3143218

---

这看起来像是一个 XY 问题，你不想使用变量的名称，那样会很傻，你想使用可能有键的对象，或者一组类的数组，或者变量的实际值。 - elclanrs

http://jsfiddle.net/f6WpJ/1/ 但更好的是 http://jsfiddle.net/f6WpJ/3/ - dfsq

当然，一旦您将多个类附加到任何特定元素上，例如<div clas="someContent somethingElse">blah</div>，这将会崩溃。 - Ja͢ck

Answer 1

您可以使用对象并在其中存储值：

var data = {someContent : "this is a JS variable"};

div = document.querySelector(".someContent");

div.innerHTML = data[div.className];

Fiddle

- Dmitry Zaets

Answer 2

您试图做的实际上是滥用元素类的语义；为了存储数据引用，最好将它们存储为数据属性，例如：

<div class="someContent somethingElse" data-param="someContent"></div>

那么你就可以将数据与元素可能具有的任何特定类列表解耦。代码看起来像这样：

var dataMap = {
    someContent: "this is a JS variable"
};

div = document.querySelector(".someContent");

div.innerHTML = dataMap[div.getAttribute('data-param')];

如果浏览器支持数据集，你可以这样做：

div.innerHTML = dataMap[div.dataset.param];

演示

- Ja͢ck

---

没错，这也许更具有未来性。 - user3143218

你也可以使用数据集，不是吗？ - user3143218

@user3143218 噢，当然了...作为一个注释添加。 - Ja͢ck

谢谢Jack。感谢你的帮助，伙计。 - user3143218

Answer 3

你可以这样做：

var someContent = "this is a JS variable";

div = document.querySelector(".someContent");

div.innerHTML = window[div.className];

演示:: jsFiddle 但是，如@dfsq所建议的那样，有更好的方法来实现它。

注意:: 使用window[div.className]假定变量在全局作用域中。

- Sudhir Bastakoti

---

假设 someContent 是全局声明的。 - Ja͢ck