データ属性を使用して、javascript（jQuery）でオブジェクトキーの値を取得する

Question

データ属性に基づいてオブジェクトの値を取得しようとしています。 私はトラブル右の辞書でそれを説明していますが、設定の例では、より明確にする必要があります。このように使用する

var obj = { 
 
    key1: "hello", 
 
    key2: "Hi", 
 
    key3: 1, 
 
    key4: 2 
 
} 
 

 
$(".key").each(function() { 
 
    var dk = $(this).data('key'); 
 
    console.log(obj.dk); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="key" data-key="key1"></div> 
 
<div class="key" data-key="key2"></div> 
 
<div class="key" data-key="key3"></div> 
 
<div class="key" data-key="key4"></div>

はundefinedを返します。 誰でもこの問題について助けることができます。ありがとう！

Answer 1

可変でJSONオブジェクトのkeyにアクセスするには、角かっこを使用する必要があります。それで、あなたはconsole.log(obj.dk)を使用する場合、それは実際にobjで名前dkを持つキーを探しconsole.log(obj[dk]);

var obj = { 
 
\t key1 : "hello", 
 
    key2 : "Hi", 
 
    key3 : 1, 
 
    key4 : 2 
 
} 
 

 
$(".key").each(function() { 
 
\t var dk = $(this).data('key'); 
 
\t console.log(obj[dk]); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="key" data-key="key1"></div> 
 
<div class="key" data-key="key2"></div> 
 
<div class="key" data-key="key3"></div> 
 
<div class="key" data-key="key4"></div>

にコードを変更します。

これを参照してください：私はこれを試してみましたが、OBJ、付属のドットを去った

var obj = { 
 
\t key1 : "hello", 
 
    key2 : "Hi", 
 
    key3 : 1, 
 
    key4 : 2, 
 
    dk: 6 
 
} 
 

 
$(".key").each(function() { 
 
\t var dk = $(this).data('key'); 
 
\t console.log(obj.dk); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="key" data-key="key1"></div> 
 
<div class="key" data-key="key2"></div> 
 
<div class="key" data-key="key3"></div> 
 
<div class="key" data-key="key4"></div>