0

次のようなhtmlタグのセットがあると仮定します

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

それぞれのタグkey='post'のハッシュからのように、divタグに追加の属性を追加しようとしています。{"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++;
}

しかし、エラードキュメントを取得しています。getElementByIDは関数ではありません

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

正しいメソッド名はgetElementById、singularであるため、このエラーが発生します。

そうは言っても、コードは機能するはずです。ただし、属性名としてではdata-keyなくを使用することをお勧めしkeyます。これにより、HTMLが引き続き有効になります（有効なHTML5）。

于 2012-08-30T00:53:54.730 に答える
0

非標準の属性またはプロパティの使用は、通常の理由で推奨されません。さまざまなユーザーエージェントでの動作が指定されていない、他のプログラムのカスタムプロパティと競合する可能性がある、標準の属性およびプロパティに将来追加されるなどの理由があります。

他の回答で指摘されてdata-いるように、属性を使用することはできますが、古いブラウザーでは上記の問題が発生します。OPでは、プロパティへの直接アクセスよりもsetAttributeを使用するメリットがわかりません。

el['data-key'] = key;

（W3Cが区切り文字としてハイフンの代わりにアンダースコアを選択した場合は、より便利でした。）

プロパティを使用すると、値は任意のタイプにすることができますが、setAttributeは文字列のみを許可します。

もう1つのオプションは、値をオブジェクトまたは配列に格納し、何らかの参照（要素IDなど）によって値を取得することです。これにより、値を文字列以外の型にすることもできます。

于 2012-08-30T01:50:23.350 に答える