Javascript Jquery在属性更改时获取属性值

我有下面的HTML

<div class="element" data-settings={"apples":1,"bananas":4,"speed":300}>
</div>

它返回

数据设置

值，但当我更新设置并再次单击

.element

时，它不会返回更新的值

例如，我在应用程序中将苹果更新为8。我在HTML中看到

数据设置={“苹果”：8，“香蕉”：4，“速度”：300}

，但在我的控制台日志中，苹果仍然是1

我还尝试：

$('body').on('click', '.element', function() {
    console.log( $(".element").data("settings") );
});

而且不起作用

如何查看my js中数据属性设置的实时更改？

您应该同时使用和属性

$（文档）.on（'click'，'show'，function（））{
//转换为JSON
$settings=JSON.parse（$（“.element”）.attr（“数据设置”）；
$settings.speed=getRandomInt（500）；//更新该值
$settings.apples=getRandomInt（10）；//更新该值
$settings.bananas=getRandomInt（100）；//更新该值
//转换为字符串
$settings=JSON.stringify（$settings）；
//在Div中更新
$（“.element”）.attr（“数据设置”，$settings）；
$（'.result'）.append（'
'+$settings+'
'）；
});
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max）+1）；
}

单击“生成”按钮更新Div中的值。
这里我添加了一个函数来生成随机整数值。
显示

{“苹果”：1，“香蕉”：4，“速度”：300}

包括

设置的代码

数据更新更新设置的代码在Reactjs中，并已编译、缩小。无法读取。请使用

.attr（'data-settings'）

而不是

.data（'settings'）

@Mohamed Yousef为什么@CyberJunkie

JSON.parse（$（this.attr（“数据设置”））.apples

$('body').on('click', '.element', function() {
    console.log( $(".element").data("settings") );
});