javascript - 使用 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

事实上data-ixp-input-state value 是一个 JSON 字符串，您应该将其包装在两个 " 之间首先，然后转义"其中的字符或将其替换为 ' .

然后你可以使用 $(".interest-select").data("ixp-input-state") 获取它的值，你会得到一个字符串，然后你可以解析它来读取内部对象。

演示:

这是一个演示:

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>