Question

这是HTML属性：

data-plugin-options="{'Enabled': true, 'StartAt': 30, 'EndAt': 65}"

如何通过javascript通过键名获取键的值？例如“ StartAt”值。

Answer 1

请参见下面的代码。我们知道singleQuote在解析JSON时会给您一个错误。所以我将其替换为doubleQuote。

$(document).ready(function(){
var d=$("#data").attr('data-plugin-options');
d=d.replace(/'/g, '"');
var parsedData=JSON.parse(d);
console.log(parsedData.StartAt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id='data' data-plugin-options="{'Enabled': true, 'StartAt': 30, 'EndAt': 65}">Some text...</p>

Answer 2

元素中的数据始终是字符串，但是您可以解析它，没问题。

这里是一个例子，怎么做

const myElement = document.querySelector('p') // here you have element object, you can use other ways to get it
const dataString = myElement.dataset.pluginOptions // here you have string of the data
const formattedDataString = dataString.replace(/'/g, '"') // your JSON is wrongly formatted, this is fix
const dataObject = JSON.parse(formattedDataString) // where you have object of the data
const dataValue = dataObject.Enabled // where you have value by key

您的JSON格式也错误，在JSON规范要求双引号的地方，它具有单引号。您可以替换它，但是如果内容包含双引号，这可能会带来其他问题-这会使脚本崩溃。我建议您查看JSON的生成，并尽可能将其更改为标准。

希望这会有所帮助

从HTML属性数组javascript

2 个答案: