0

假设我们有一组 html 标签，比如

<div id="slide1" class="slide"></div>
<div id="slide2" class="slide"></div>
<div id="slide3" class="slide"></div>

我正在尝试在 div 标签中添加一个额外的属性，比如分别从每个标签key='post'的哈希中。{"post" : ["0","1"], "get": ["0","2"], "search": ["2","1"]}使它看起来像，

<div id="slide1" class="slide" key="post"></div>
<div id="slide2" class="slide" key="get"></div>
<div id="slide3" class="slide" key="search"></div>

是否可以使用javascript来做到这一点？

我想出的代码看起来像

for(key in hashArray){
var el = document.getElementsByID('slide' + (slideNumber));
el.setAttribute('key', key);
slideNumber++;
}

但我收到一个错误 document.getElementByID is not a function

4

3 回答 3

2

使用自定义数据属性[例如data-key]，那么你是完全正确的。

编辑：您的代码将如下所示：

var slideNumber = 1;

for(key in hashArray){
    var el = document.getElementById('slide' + (slideNumber));
    el.setAttribute('data-key', key);
    slideNumber++;
}

在这里工作小提琴。

于 2012-08-30T00:52:00.873 回答
0

出于通常的原因，建议不要使用非标准属性或属性 - 未指定不同用户代理中的行为，可能与其他程序的自定义属性冲突以及将来添加到标准属性和属性等。

正如其他答案中所指出的，您可以使用data-属性，但即使它们对于旧版浏览器也存在上述问题。在 OP 中，我看不到使用setAttribute而不是直接访问属性的任何好处：

el['data-key'] = key;

（如果 W3C 选择下划线而不是连字符作为分隔符，会更方便。）

使用属性，值可以是任何类型，而setAttribute只允许字符串。

另一种选择是将值存储在对象或数组中并通过某些引用（例如元素 ID）获取它们，这也允许值是字符串以外的类型。

于 2012-08-30T01:50:23.350 回答
0

您收到该错误是因为正确的方法名称是getElementById, single。

也就是说，您的代码应该可以工作。但是，我建议使用data-key而不是key作为属性名称，这样您的 HTML 仍然有效（有效的 HTML5）。

于 2012-08-30T00:53:54.730 回答