jQueryを使用してデータ要素内のオブジェクトを対象にする

Question

データ属性のオブジェクトから値を取得しようとしています。以下の例は、私が作業している要素の短縮版です。

<div class="interest-select" data-ixp-input-state={ 
"instanceId":"iMABIId8pUGkQNMZ4izOLg", 
"dataField":{\"id\":694,\"name\":\"ProductInterest\"}", 
"validation":"valid", 
"required":true,"value":"career", 
"hasValue":true"}</div> 

これまでのところ、私は以下のjQueryのいくつかのバリエーションを試してみたが、これは未定義を返す保つ：

var stateObj= $(".interest-select").attr("data-ixp-input-state") 
var value= stateObj[5]//this should be equal to "career" 

Answer 1

あなたはそのデータ属性のいくつかのJSON-構文エラーがあります、このような二重のダングリングなどを引用符（最後のtrueの後、そしてProductInterest"}の後...）。一方、データプロパティの値全体を引用符で囲む必要があります。別の引用符（一重引用符）を使用する方がよいので、エスケープする必要はありません。

また、divオープニングタグの末尾が>ではありません。

あなたはすべてのことを修正した場合data方法でそれにアクセスする際に、jQueryのキャメルケースを使用して、JSオブジェクトにそのデータ属性の値を変換します：実際に

var stateObj= $(".interest-select").data("ixpInputState") 
 
console.log(stateObj);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="interest-select" data-ixp-input-state='{ 
 
"instanceId":"iMABIId8pUGkQNMZ4izOLg", 
 
"dataField":{"id":694,"name":"ProductInterest"}, 
 
"validation":"valid", 
 
"required":true,"value":"career", 
 
"hasValue":true}'></div>

Answer 2

data-ixp-input-state値はJSON文字列で、まず"の2つの文字の間に置き、"文字をエスケープするか、'に置き換えてください。

次に、$(".interest-select").data("ixp-input-state")を使用して値を取得すると、文字列が取得され、それを解析してintenalオブジェクトを読み取ることができます。

デモ：これはデモです

：あなたはJSONでいくつかの構文エラーがあった

var value = $(".interest-select").data("ixp-input-state"); 
 

 
console.log(value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="interest-select" data-ixp-input-state="{ 
 
'instanceId':'iMABIId8pUGkQNMZ4izOLg', 
 
'dataField':{'id':694,'name':'ProductInterest'}, 
 
'validation':'valid', 
 
'required':true,'value':'career', 
 
'hasValue':true}"> the content</div>

Answer 3

：

• 'データ - '属性の開始と終了は単一引用符は、あなたが最後に真のブール
ありました
• 行方不明>の後に余分な引用符を持っていた
引用符の前にスラッシュを持つべきではありません
• データフィールドの値（二重引用符を使用して維持します）

小提案のdivの終わり：インデントは問題

<div class="interest-select" 
    data-ixp-input-state='{ 
     "instanceId":"iMABIId8pUGkQNMZ4izOLg", 
     "dataField": { "id": 694, "name": "ProductInterest" }, 
     "validation":"valid", 
     "required":true, 
     "value":"career", 
     "hasValue":true 
    }'></div> 

を見つけるために、コードをより明確かつ容易にするためにこれらの事に役立ち、代わりに " .attr 'メソッドを使用する場合は、' .data 'メソッドを使用する必要があります。違いは、後者が自動的にデータをJSONフォーマットに解析することです。次に、 'JSON値を追加することで各JSON値を呼び出すことができます。このようなオブジェクトの後キー名 '：

<script> 
    var stateObj = $(".interest-select").data("ixp-input-state"); 
    var result = stateObj.value; 
</script> 

またはこの：

<script> 
    var result = $(".interest-select").data("ixp-input-state").value; 
</script> 

Answer 4

var stateObj = $(".interest-select").attr("data-ixp-input-state"); 
 
stateObj = JSON.parse(stateObj); 
 
console.log(stateObj["value"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="interest-select" data-ixp-input-state='{ 
 
     "instanceId":"iMABIId8pUGkQNMZ4izOLg", 
 
     "dataField": { "id": 694, "name": "ProductInterest" }, 
 
     "validation":"valid", 
 
     "required":true, 
 
     "value":"career", 
 
     "hasValue":true 
 
    }'></div>

あなたはあなたのデータを解析しなければなりません。