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值是一个JSON字符串，您应首先将其包装在两个"之间，然后转义其中的"个字符或将其替换为'。

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

<强>演示：

这是一个演示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您在该数据属性中有几个JSON语法错误：例如悬空双引号（在最后true之后，在ProductInterest"}之后，......）。另一方面，应该引用整个数据属性的值，并且最好使用其他类型的引用（单引号），因此您不必进行任何转义。

div开场广告代码未使用>正确结束。

如果你纠正了这一切，jQuery会在使用data方法使用驼峰大小写访问它时将该数据属性的值转换为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 3

您的JSON中存在一些语法错误：

＆＃39;数据 - ＆＃39;属性应以单引号开头和结尾（以继续使用双引号）
dataField值不应该在引号
在最后一个真正的布尔值
缺少＆gt;在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>

而不是＆＃39; .attr＆＃39;方法，你应该使用＆＃39; .data＆＃39;方法，不同之处在于后者会自动将数据解析为JSON格式。然后，您可以通过添加＆＃39;。 keyname ＆＃39;来调用每个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>

您应该解析数据。

使用jQuery在数据元素中定位对象

4 个答案: