2015-11-17 20 views
27

の属性:GETデータは、私は次のhtml持っているJavaScriptコード

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span> 

をそれがdata-で始まる属性を取得し、以下のコードのようなのJavaScriptコードでそれを使用することは可能ですか?今のところ私は結果としてnullを得ます。

document.getElementById("the-span").addEventListener("click", function() { 
    var json = JSON.stringify({ 
    id: parseInt(this.dataset.typeid), 
    subject: this.dataset.type, 
    points: parseInt(this.dataset.points), 
    user: "Luïs" 
    }); 
}); 

結果:この場合でそう

// json would equal: 
{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" } 

答えて

6

あなたは

element.dataset.points 

などとしてアクセスすることができます

document.getElementById("the-span").addEventListener("click", function(){ 
    var json = JSON.stringify({ 
     id: parseInt(this.typeId), 
     subject: this.datatype, 
     points: parseInt(this.points), 
     user: "Luïs" 
    }); 
}); 
31

datasetプロパティは、バージョン11までのInternet Explorerでサポートされていなかったので、あなたの代わりにgetAttribute()を使用することもできます。

document.getElementById("the-span").addEventListener("click", function(){ 
    console.log(this.getAttribute('data-type')); 
}); 

Dataset documentation

getAttribute documentation

-5

代わりにこのコードを試してみてください:

var type=$("#the-span").attr("data-type"); 
alert(type); 
+3

AskerはjQueryについて言及していませんでしたが、これはこの商品のための良いjQueryではありません。代わりに '.data( 'type');'にする必要があります。 –

+1

そして、この "あなたのコードの代わりに"これを使うという提案ははるかに広いです; Askerはイベントハンドリングの設定を維持し、 'data-type'属性の' alert'ではなく 'JSON'の結果を保持したいでしょう。 – trincot

+1

これはjqueryであり、純粋なjavascriptではありません。 – user3130012

関連する問題